{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Споры о том, насколько SPA лучше или хуже проверенных серверных технологий, не утихают до сих пор. Сторонники SPA (React, Angular, VueJS) в один голос говорят насколько это просто и удобно. Сторонники серверных технологий (PHP, JSP, ASP) ничего не говорят, потому что их мало и они заняты разработкой. Из-за того, что оба подхода достаточно разные, то и сравнивать их очень сложно. Зачастую сравнение сваливается во вкусовщину, так как нет людей, которые бы разрабатывали как с помощью одних, так и с помощью других. И даже, если такие уникумы находятся, никто в здравом уме не будет реализоваывать сложную функциональность одновременно и на той, и на другой технологии. Кроме меня.","type":"unstyled","key":"3vga6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"ITALIC"}],"text":"TL;TR Я смог разработать такой компонент без каких-либо сложностей.","type":"blockquote","key":"f7em0"},{"data":{"image":{"id":"5df731a62beb4900b1cb620b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4u0lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Начало","type":"header-two","key":"7mqc7"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":8,"offset":20},{"key":1,"length":3,"offset":47},{"key":2,"length":10,"offset":54},{"key":3,"length":5,"offset":75},{"key":4,"length":7,"offset":142}],"inlineStyleRanges":[],"text":"Так получилось, что r2server написан с помощью JSP, а r2cloud-ui с помощью VueJS. И вот мне понадобилось реализовать компонент по отображению OpenAPI в обоих проектах. В этот момент возникла уникальная ситуация:","type":"unstyled","key":"d8vjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нужно реализовать абсолютно одинаковый компонент как в r2cloud-ui, так и в r2server.","type":"unordered-list-item","key":"8b0f2"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":10,"offset":42}],"inlineStyleRanges":[],"text":"У него должен быть один и тот же дизайн - bootstrap4. Несмотря на то, что приложения разные, я решил сделать максимально похожий user experience. Это удобно по нескольким причинам: во-первых, достаточно знать один набор компонент, во-вторых, пользователи, вполне очевидно, будут использовать и то, и другое приложение.","type":"unordered-list-item","key":"dloc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Требования","type":"header-two","key":"9u60m"},{"data":{"image":{"id":"5df731a79ca51200afa86b26"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ej2i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде, чем начать сравнивать фреймворки, я хотел бы описать требования:","type":"unstyled","key":"c2jhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"компонент должен быть не зависимым от приложения. Это прежде всего значит, что его можно встраивать не только в моё приложение, но и в любое другое.","type":"unordered-list-item","key":"bum6"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":10,"offset":120}],"inlineStyleRanges":[],"text":"он должен отображать описание OpenAPI с помощью bootstrap4. Это описание должно быть максимально похожим на стандартный swagger-ui.","type":"unordered-list-item","key":"9t35n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(опционально) 80% покрытия тестами.","type":"unordered-list-item","key":"741v5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того, как были определены требования, я без проблем написал необходимый код. Результаты моих ощущений ниже.","type":"unstyled","key":"8akfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Простота старта","type":"header-two","key":"dpojb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для JSP начало работы достаточно простое:","type":"unstyled","key":"fifvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создать стандартный maven проект","type":"unordered-list-item","key":"21umc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"положить описание в /META-INF/tags","type":"unordered-list-item","key":"43hfn"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":15,"offset":51},{"key":8,"length":6,"offset":145},{"key":9,"length":7,"offset":203}],"inlineStyleRanges":[],"text":"Однако, для VueJS старт очень запутанный. Я открыл официальный гид по созданию компонентов и увидел, что там рекомендуется начать с конфигурации rollup. Несмотря на то, что стандартом индустрии является webpack, я не нашёл упоминания о нём в документации. rollup действительно позволяет быстро начать разрабатывать компонент, но как только захочется посмотреть промежуточный результат, то тут ожидается облом. rollup просто компилирует файлы в разные форматы и ни о каком dev сервере речи нет.","type":"unstyled","key":"61toj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"scripts\": {\n \"build\": \"npm run build:umd & npm run build:es & npm run build:unpkg\",\n \"build:umd\": \"rollup --config build/rollup.config.js --format umd --file dist/vue-openapi-bootstrap.umd.js\",\n \"build:es\": \"rollup --config build/rollup.config.js --format es --file dist/vue-openapi-bootstrap.esm.js\",\n \"build:unpkg\": \"rollup --config build/rollup.config.js --format iife --file dist/vue-openapi-bootstrap.min.js\"\n}","type":"blockquote","key":"4tu9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Простота упаковки","type":"header-two","key":"3cqll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут о обоих фреймворков нет проблем. Для JSP упаковка - это стандартная команда maven:","type":"unstyled","key":"6k5mj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mvn package","type":"blockquote","key":"f8g8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В VueJS соответственно:","type":"unstyled","key":"5s2d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm build","type":"blockquote","key":"1a3ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Тестирование","type":"header-two","key":"abpgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опять же, из-за rollup и общей путаницы с технологиями, начать тестировать компонент на VueJS нетривиально. Если честно, я так и не осилил переход на webpack с полноценными тестами и покрытием кода.","type":"unstyled","key":"5m97c"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":17,"offset":93}],"inlineStyleRanges":[],"text":"В JSP же всё относительно просто: я просто скопировал подход для тестирования тэгов, который использовал ранее и сразу получил страницу index.html, которая загружается в браузер простым кликом.","type":"unstyled","key":"f7giv"},{"data":{"image":{"id":"5df731fbb477bf00afd0f091"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7avd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Скорость разработки","type":"header-two","key":"fqi3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да, инженерная мысль шагнула далеко вперед за последние 20 лет и разрабатывать на VuejS получается значительно быстрее. Например, синтаксис чуть более компактный. Сравните вывод одного и того же блока на VueJS:","type":"unstyled","key":"2rlga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Available values:\n{{ param.schema.items.enum.join(', ') }}\n

","type":"blockquote","key":"46ogm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И на JSP:","type":"unstyled","key":"7bdad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Available values:\n, ${curEnum}\n

","type":"blockquote","key":"dfv1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё одной вещью, значительно ускоряющей разработку (не путать со стабильностью кода!), является отсутствие строгой типизации. Сама по себе доменная модель OpenAPI нетривиальная, поэтому в JSP мне приходилось загружать её из JSON с помощью специальной библиотеки swagger-parser-v3. И даже после того, как я её загрузил, мне приходилось делать различные приседания, чтобы сгруппировать объекты в удобной виде:","type":"unstyled","key":"fohhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"private static Map getOperationsByType(PathItem item) {\n\tMap result = new HashMap<>();\n\tif (item.getGet() != null) {\n\t\tresult.put(\"get\", item.getGet());\n\t}\n\t...\n\treturn result;\n}","type":"blockquote","key":"8ff8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В javascript же такой проблемы не было, так как json - это JavaScript Object Notation. Что как бы намекает на глубокую поддержку внутри самого языка. Из-за этого загрузка выглядела достаточно просто:","type":"unstyled","key":"e0frg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"openapi = response.data","type":"blockquote","key":"9rvhq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следующей неудобной штукой при разработке были вспомогательные методы. Например, необходимо было в зависимости от http метода отобразить цвет. В VueJS - это делается с помощью объявления метода прямо в файле:","type":"unstyled","key":"f11up"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"methods: { \n getColorByMethod (method) {\n ...\n }\n}","type":"blockquote","key":"epfgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И использование (всё в том же файле):","type":"unstyled","key":"76o7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"40u5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JSP же пришлось объявлять специальные функциональные методы в jsp-openapi.tld:","type":"unstyled","key":"k03d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\tgetColorByMethod\n\tru.r2cloud.openapi.OpenAPIHelper\n\tjava.lang.String getColorByMethod(ru.r2cloud.openapi.OperationDetails)\n","type":"blockquote","key":"45q60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Описывать их в java коде:","type":"unstyled","key":"f0biq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"public class OpenAPIHelper {\n\tpublic static String getColorByMethod(OperationDetails method) {\n\t\t...\n\t}\n}","type":"blockquote","key":"6bblu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И использовать внутри JSP:","type":"unstyled","key":"2ced0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fr8pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Простота переиспользования","type":"header-two","key":"2m9ea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут оба фреймворка постарались и сделали вполне неплохое переиспользование своих компонент. Подключить jsp tag в проект можно описав зависимость:","type":"unstyled","key":"3rjpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\tru.r2cloud.openapi\n\tjsp-openapi\n\t1.0\n","type":"blockquote","key":"2941j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И добавив на страницу:","type":"unstyled","key":"f6e22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<%@ taglib prefix=\"openapi\" uri=\"https://github.com/dernasherbrezon/jsp-openapi\" %>\n","type":"blockquote","key":"2jr2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во VueJS примерно так же просто:","type":"unstyled","key":"djb6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"dependencies\": {\n \"vue-openapi-bootstrap\": \"1.0.1\"\n}","type":"blockquote","key":"ethi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование на странице:","type":"unstyled","key":"c5h9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n","type":"blockquote","key":"eihd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Выводы","type":"header-two","key":"8oclu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несмотря на то, что JSP уже почти 20 лет, разрабатывать переиспользуемые компоненты на нём достаточно просто. Конечно, чувствуется возраст технологии и некоторые вещи можно было бы сделать проще. Но тем не менее, ужасов, которые рисуют поклонники javascript и SPA, нет. При правильном дизайне и тот, и другой фреймворк предоставляют достаточно мощные инструменты для написания и переиспользования компонентов.","type":"unstyled","key":"9hh8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3inms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"nJ7jj5N0QcmTCRDsl3Kb"}],"entityMap":{"0":{"data":{"href":"https://r2server.ru/","url":"https://r2server.ru/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://ru.wikipedia.org/wiki/JavaServer_Pages","url":"https://ru.wikipedia.org/wiki/JavaServer_Pages"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://github.com/dernasherbrezon/r2cloud-ui","url":"https://github.com/dernasherbrezon/r2cloud-ui"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://vuejs.org/","url":"https://vuejs.org/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://swagger.io/docs/specification/about/","url":"https://swagger.io/docs/specification/about/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://getbootstrap.com/","url":"https://getbootstrap.com/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://petstore.swagger.io/","url":"https://petstore.swagger.io/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://ru.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html","url":"https://ru.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://rollupjs.org/guide/en/","url":"https://rollupjs.org/guide/en/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://webpack.js.org/","url":"https://webpack.js.org/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://dernasherbrezon.com/posts/jsp-tag-testing/","url":"https://dernasherbrezon.com/posts/jsp-tag-testing/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}