Джерело: 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 для наступного проекту.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ