Источник: NocodefunctionsВашему вниманию предлагается статья об опыте разработки независимого веб-приложения с использованием Java.
Java для фронтенда — неужели это возможно?
Многие считают, что применение Java для фронтенд-разработки просто невозможно: ведь Java предназначена для бэкенда. Да, давным-давно Java-апплеты и Java Webstart позволяли запускать Java-приложения из браузера. Но это древняя история, старая, как Flash-плагины.
Но даже без апплетов есть способ использовать Java для фронтенда — это JSP (Java Server Pages), которые многие школьники изучали еще на уроках информатики. Однако, хотя JSP все еще обсуждается в некоторых книгах по Java, эта технология устарела с 2010-х годов. Неужели очередной тупик?
Есть еще фреймворки, которые позволяют разработчикам Java “транспилировать” (преобразовывать сложным образом) свой код в JavaScript с помощью Google Web Toolkit (GWT, он тоже не суперновый) или через J2Cl (тоже от Google). Важно учесть, что GWT и J2Cl не подходят для новичков, они представляют собой скорее корпоративные инструменты, разработанные Google для использования в крупных проектах.
Невоспетый герой Java для фронтенда: Jakarta Faces (JSF)
Java Server Faces (JSF), теперь известный как “Jakarta Faces”, существует как минимум с начала 2010-х годов. Я всегда удивляюсь, что он мало известен и редко упоминается, поскольку этот фреймворк позволяет легко разрабатывать веб-приложения быстро, безопасно и надежно.
JSF легко освоить и он использует все преимущества экосистемы Java. Вот как, например, создается веб-страница с динамическим содержимым:
Создаете html-страницу (с расширением .xhtml).
Меняете html-теги <head> и <body> на теги <h:head> и <h:body>.
Теперь, чтобы отобразить динамический контент, вызвав какое-то свойство в бэкенде, просто поместите этот код после хэштега и между полосами управления:
#{backendscript.myText}
Затем создайте файл Backendscript.java в своем бэкенде, добавьте переменную с именем String myText = "hi! welcome to my page!". Он будет отображаться на веб-странице.
JSF действительно очень прост. Он хорошо задокументирован благодаря множеству вопросов на Stackoverflow, официальной документации, нескольким книгам (эта ссылка, и еще мне нравятся книги Дэвида Хеффельфингера) и, конечно же, видео на Youtube.
JSF сложный? Каковы его преимущества?
JSF совсем не сложный. Более того:
Он хорошо интегрирован с классическими IDE для Java (NetBeans, IntelliJ IDEA и Eclipse). Каждая IDE предоставляет:
Шаблонные проекты, которые заполняют шаблон для конфигурации Maven (что, кстати, очень просто).
Инструменты отладки (с горячей перезагрузкой, по крайней мере, для NetBeans).
Эффективные инструменты автозаполнения, рефакторинга, навигации и выделения ошибок экосистемы Java. IDE может предоставить полезную информацию о любом классе, который вы упомянули на html-странице (например, о #{backendscript.myText}, упомянутом выше). Страницы HTML действительно будут интегрированы с остальной частью вашей кодовой базы!
Он очень легко обрабатывает сложные варианты кода на html-страницах.
Вам нужно обновить часть страницы простым нажатием кнопки? Добавьте свойство update к своей кнопке, а затем идентификатор компонента, который нужно обновить.
Что касается обновления и динамического контента: мне очень нравится простота JSF: фронтенд обновляет бэкенд, обновляет себя, или бэкенд обновляет фронтенд. Все это основные требования веб-приложения и здесь они присутствуют.
Если нужно, чтобы пользователь имел возможность загрузить файл или несколько файлов с условиями по типам и размерам файлов, просто добавьте в код одну строку с четкими параметрами.
Нужно сделать веб-сайт на нескольких языках? Добавьте тэг <f:view> в свой html и получите язык пользователя с помощью всего лишь одной строки в бэкенде.
Вы можете добавлять и смешивать HTML-теги, сценарии JS и CSS, и все это оптимизировано для SEO.
У вас есть полный контроль над html, созданный JSF, и вы всегда можете добавить код html и js. Это упрощает сотрудничество с дизайнерами и фронтенд-разработчиками, которые не знают и не интересуются JSF. Когда я работал с CSS, мне помогал дизайнер, который умел работать с html-страницами, созданными мною с помощью JSF, без каких-либо трудностей внося необходимые изменения.
JSF генерирует HTML-код, который вы можете просмотреть и прочитать в своем браузере. Это очень помогает для отладки с помощью обычных инструментов разработки и проверки правильности реализации ваших SEO-действий.
Primefaces: огромный список бесплатных компонентов и тем для JSF
JSF поставляется с длинным списком готовых к использованию компонентов, которые создают классические части html-страницы, поэтому вам не нужно делать это самостоятельно. Например, используйте тег <h:dataTable> для создания таблицы, отображающей определенные данные, загруженные из вашего бэкенда — и вам не нужно воссоздавать ее с нуля.
А есть и лучший вариант: компания Prime Tek разработала набор компонентов с открытым исходным кодом под названием Primefaces. Они поставляются с дополнительными функциями и имеют ряд преимуществ.
Например, вместо <h:dataTable> просто используйте тег Primefaces <p:dataTable>. Это создает базовую таблицу данных, к которой вы можете легко добавить переключатель столбцов, динамические столбцы, или отредактировать функции в таблице.
Но ведь Java медленная и тяжелая?
1. Java медленная?
Нет. Самое смешное, что JS-фреймворки, такие как React, Angular и Vue, создавались с обещанием быть быстрее и умнее, чем JSF на Java, потому что они сразу отправляли всю логику приложения в браузер посетителя сайта. JSF работает по-другому: когда пользователь вызывает страницу (например, https://nocodefunctions.com), приложение в бэкенде генерирует html только для этой страницы и отправляет его обратно. Это называется “рендеринг на стороне сервера” (SSR).
На практике для одностраничных приложений пользователю может потребоваться очень много времени, чтобы получить и загрузить javascript-файлы, из которых состоит все приложение. Это может привести к плохому взаимодействию с пользователем (необходимость ждать загрузки первой страницы) и проблемам с SEO. В результате рендеринг на стороне сервера в стиле Java снова приобрел популярность, поскольку считается, что он превосходит рендеринг на стороне клиента с точки зрения скорости и производительности. Появляются новые фреймворки SSR, которые обязывают разработчиков, привыкших к рендерингу на стороне клиента, обрабатывать и смешивать эти две разные логики.
2. Java тяжелая?
Нет. Что вам нужно для развертывания приложения JSF:
Само приложение. Простое JSF-приложение “hello world” весит, вероятно, 10 КБ или меньше.
Опционально — Primefaces (обсуждалось выше), если вам нужны более качественные компоненты. Это дополнительные 4,5 Мб.
Теперь запустите всё его на сервере. Для этого вам необходимо:
Иметь сервер в облаке или где-то еще. Для тестовой версии Nocodefunctions (https://test.nocodefunctions.com) я использую Hetzner, где я арендую сервер без операционной системы с 2 ГБ ОЗУ за 4,15 евро в месяц. Я мог бы использовать меньше оперативной памяти, но мое приложение предоставляет некоторые услуги с интенсивным использованием данных, и оно должно умещаться в памяти. Настоящая (не тестовая) версия nocodefunctions работает на более крупном сервере (также с Hetzner) для параллельной поддержки задач с интенсивным использованием данных большего числа пользователей — менее чем за 50 евро в месяц.
У вас должна быть установлена Java. Это одна загрузка файла размером менее 200 МБ для Mac, Win или Linux, полностью бесплатна даже для коммерческого использования.
Нужно иметь веб-сервер Java для запуска. Их много. Лично я использую Payara Micro (Community Edition), которая бесплатна и представляет собой загрузку одного файла размером 77 МБ.
Запустите свое приложение.
Вывод: подумайте о Java!
Я чувствую, что некоторые программисты думают, что Python, Ruby, PHP, NodeJS + React… — единственный выбор при запуске небольшого веб-приложения. Но теперь я надеюсь, что они также рассмотрят Java + JSF для своего следующего проекта.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ