JavaRush /Java Blog /Random-TL /Coffee break #157. Paggamit ng Java para sa mga front-end...

Coffee break #157. Paggamit ng Java para sa mga front-end na web application sa 2022

Nai-publish sa grupo
Pinagmulan: Nocodefunctions Dinadala namin sa iyong pansin ang isang artikulo tungkol sa karanasan ng pagbuo ng isang independiyenteng web application gamit ang Java. Coffee break #157.  Paggamit ng Java para sa mga front-end na web application sa 2022 - 1

Java para sa frontend - posible ba talaga?

Maraming tao ang naniniwala na ang paggamit ng Java para sa front-end na pag-unlad ay imposible lamang: pagkatapos ng lahat, ang Java ay idinisenyo para sa back-end. Oo, matagal na ang nakalipas, pinahintulutan ka ng Java applet at Java Webstart na magpatakbo ng mga Java application mula sa browser. Ngunit ito ay sinaunang kasaysayan, kasing edad ng mga plugin ng Flash. Ngunit kahit na walang mga applet, mayroong isang paraan upang magamit ang Java para sa front end - ito ay JSP (Java Server Pages), na pinag-aralan ng maraming mga mag-aaral sa mga aralin sa computer science. Gayunpaman, bagama't tinatalakay pa rin ang JSP sa ilang aklat ng Java, ang teknolohiya ay hindi na ginagamit mula noong 2010s. Isa na ba talaga itong dead end? Mayroon ding mga framework na nagpapahintulot sa mga developer ng Java na "i-transpile" (magbago sa mga kumplikadong paraan) ang kanilang code sa JavaScript gamit ang Google Web Toolkit (GWT, hindi rin ito sobrang bago ) o sa pamamagitan ng J2Cl (mula rin sa Google). Mahalagang tandaan na ang GWT at J2Cl ay hindi angkop para sa mga nagsisimula, ang mga ito ay higit pang mga enterprise tool na binuo ng Google para magamit sa malalaking proyekto.

Ang unsung hero ng Java para sa frontend: Jakarta Faces (JSF)

Ang Java Server Faces (JSF), na ngayon ay kilala bilang "Jakarta Faces," ay umiral na mula pa noong unang bahagi ng 2010s. Palagi akong nagugulat na ito ay hindi gaanong kilala at bihirang banggitin dahil ang balangkas na ito ay nagpapadali sa pagbuo ng mga web application nang mabilis, ligtas at mapagkakatiwalaan. Ang JSF ay madaling matutunan at lubos na sinasamantala ang Java ecosystem. Narito kung paano, halimbawa, lumikha ka ng isang web page na may dynamic na nilalaman:
  • Gumawa ng html page (na may extension na .xhtml).
  • Baguhin ang <head> at <body> html tags sa <h:head> at <h:body> tag.
  • Ngayon, para magpakita ng dynamic na content sa pamamagitan ng pagtawag sa ilang property sa backend, ilagay lang ang code na ito pagkatapos ng hashtag at sa pagitan ng mga control bar:

    #{backendscript.myText}
Pagkatapos ay lumikha ng Backendscript.java file sa iyong backend, magdagdag ng variable na tinatawag na String myText = "hi! welcome to my page!" . Ito ay ipapakita sa web page. Ang JSF ay talagang napaka-simple. Ito ay mahusay na dokumentado salamat sa maraming mga katanungan sa Stackoverflow , opisyal na dokumentasyon , ilang mga libro ( ang link na ito , at gusto ko rin ang mga aklat ni David Heffelfinger ) at siyempre ang mga video sa Youtube .

Ang JSF ba ay kumplikado? Ano ang mga pakinabang nito?

Ang JSF ay hindi kumplikado sa lahat. Bukod dito:
  1. Ito ay mahusay na isinama sa mga klasikong Java IDE (NetBeans, IntelliJ IDEA at Eclipse). Ang bawat IDE ay nagbibigay ng:
    • Mga proyekto ng template na pumupuno sa template para sa pagsasaayos ng Maven (na, sa pamamagitan ng paraan, ay napaka-simple).
    • Mga tool sa pag-debug (na may mainit na pag-reload, kahit man lang para sa NetBeans).
    • Napakahusay na autocompletion, refactoring, navigation, at mga tool sa pag-highlight ng error para sa Java ecosystem. Ang IDE ay maaaring magbigay ng kapaki-pakinabang na impormasyon tungkol sa anumang klase na binanggit mo sa html page (tulad ng #{backendscript.myText} na binanggit sa itaas). Ang mga pahina ng HTML ay aktuwal na isasama sa natitirang bahagi ng iyong codebase!
  2. Napakadali nitong pinangangasiwaan ang mga kumplikadong variation ng code sa mga pahina ng html.
    • Kailangan mo bang i-refresh ang bahagi ng isang page gamit ang isang simpleng pag-click sa button? Magdagdag ng property ng update sa iyong button, na sinusundan ng ID ng component na gusto mong i-update.
    • Tungkol sa pag-update at dynamic na nilalaman: Talagang gusto ko ang pagiging simple ng JSF: ina-update ng frontend ang backend, ina-update mismo, o ina-update ng backend ang frontend. Ang lahat ng ito ay ang mga pangunahing kinakailangan ng isang web application at ang mga ito ay naroroon dito.
    • Kung gusto mong makapag-download ang user ng file o ilang file na may mga kundisyon para sa mga uri at laki ng file, magdagdag lang ng isang linya sa code na may malinaw na mga parameter .
    • Kailangang gumawa ng website sa maraming wika? Magdagdag ng <f:view> tag sa iyong html at kunin ang wika ng user na may isang linya lang sa backend.
  3. Maaari kang magdagdag at maghalo ng mga HTML tag, JS at CSS script, at lahat ito ay SEO optimized.
Mayroon kang ganap na kontrol sa html na nabuo ng JSF at maaari kang palaging magdagdag ng html at js code. Ginagawa nitong mas madali ang pakikipagtulungan sa mga designer at front-end na developer na walang alam o nagmamalasakit sa JSF. Noong nagtatrabaho ako sa CSS, nagkaroon ako ng tulong ng isang taga-disenyo na maaaring gumana sa mga pahina ng HTML na ginawa ko gamit ang JSF, na ginagawa ang mga kinakailangang pagbabago nang walang anumang kahirapan. Ang JSF ay bumubuo ng HTML code na maaari mong tingnan at basahin sa iyong browser. Ito ay lubhang kapaki-pakinabang para sa pag-debug gamit ang mga regular na tool sa pag-develop at pag-verify na ang iyong mga aksyon sa SEO ay ipinatupad nang tama.

Primefaces: Malaking listahan ng mga libreng bahagi at tema ng JSF

Ang JSF ay may kasamang mahabang listahan ng mga bahaging handa nang gamitin na lumilikha ng mga klasikong bahagi ng isang html page, kaya hindi mo na kailangang gawin ito nang mag-isa. Halimbawa, gamitin ang tag na <h:dataTable> upang lumikha ng isang talahanayan na nagpapakita ng partikular na data na na-load mula sa iyong backend—nang hindi kinakailangang muling likhain ito mula sa simula. At mayroong isang mas mahusay na opsyon: Ang Prime Tek ay bumuo ng isang open source na hanay ng mga bahagi na tinatawag na Primefaces . Ang mga ito ay may mga karagdagang tampok at may ilang mga pakinabang. Halimbawa, sa halip na <h:dataTable>, gamitin lang ang Primefaces <p:dataTable> tag. Lumilikha ito ng pangunahing talahanayan ng data kung saan madali kang makakapagdagdag ng mga switch ng column , dynamic na column , o mag-edit ng mga function sa talahanayan.

Ngunit ang Java ay mabagal at mabigat?

1. Mabagal ba ang Java?

Hindi. Ang nakakatawa ay ang JS frameworks tulad ng React, Angular at Vue ay nilikha na may pangakong mas mabilis at mas matalino kaysa sa JSF sa Java, dahil agad nilang ipinadala ang lahat ng logic ng application sa browser ng bisita ng site. Ang JSF ay gumagana nang iba: kapag ang isang user ay tumawag sa isang pahina (hal. https://nocodefunctions.com), ang application sa backend ay bumubuo ng html para sa pahinang iyon lamang at ibinabalik ito. Ito ay tinatawag na "server side rendering" (SSR). Sa pagsasagawa, maaaring mangailangan ng napakahabang panahon ang mga application sa isang pahina para makuha at mai-load ng user ang mga javascript file na bumubuo sa buong application. Ito ay maaaring humantong sa hindi magandang karanasan ng user (kinakailangang maghintay para mag-load ang unang pahina) at mga isyu sa SEO. Bilang resulta, ang Java-style na server-side na pag-render ay muling nakilala dahil ito ay itinuturing na mas mataas kaysa sa client-side na pag-render sa mga tuntunin ng bilis at pagganap. Lumilitaw ang mga bagong balangkas ng SSR na nangangailangan ng mga developer na nakasanayan na sa pag-render sa panig ng kliyente na pangasiwaan at paghaluin ang dalawang magkaibang lohika na ito.

2. Mahirap ba ang Java?

Hindi. Ano ang kailangan mong mag-deploy ng JSF application:
  • Ang application mismo. Ang isang simpleng JSF na "hello world" na application ay malamang na 10KB o mas kaunti.
  • Opsyonal ang mga Primeface (tinalakay sa itaas) kung kailangan mo ng mas mataas na kalidad na mga bahagi. Ito ay karagdagang 4.5 MB .
Ngayon patakbuhin ang lahat sa server. Upang gawin ito kailangan mo:
  1. Magkaroon ng server sa cloud o sa ibang lugar. Para sa pagsubok na bersyon ng Nocodefunctions (https://test.nocodefunctions.com) Gumagamit ako ng Hetzner, kung saan umuupa ako ng bare metal server na may 2 GB RAM sa halagang 4.15 euro bawat buwan. Maaari akong gumamit ng mas kaunting RAM, ngunit ang aking application ay nagbibigay ng ilang data-intensive na serbisyo at kailangan itong magkasya sa memorya. Ang tunay na (hindi pagsubok) na bersyon ng mga nocodefunction ay tumatakbo sa isang mas malaking server (kasama rin ang Hetzner) upang suportahan ang mas maraming user ng data-intensive na gawain nang magkatulad - para sa mas mababa sa €50 bawat buwan.

  2. Dapat ay mayroon kang naka-install na Java. Ito ay isang solong pag-download ng file na wala pang 200 MB para sa Mac, Win o Linux, ganap na libre kahit para sa komersyal na paggamit.

  3. Kailangan mong magkaroon ng Java web server para patakbuhin ito. Marami sa kanila. Personal, gumagamit ako ng Payara Micro (Community Edition), na libre at isang solong 77MB na pag-download ng file.

  4. Ilunsad ang iyong aplikasyon.

Konklusyon: Isipin ang Java!

Pakiramdam ko ay iniisip ng ilang programmer na ang Python, Ruby, PHP, NodeJS + React... ang tanging pagpipilian kapag nagsisimula ng isang maliit na web application. Ngunit ngayon inaasahan kong isaalang-alang din nila ang Java + JSF para sa kanilang susunod na proyekto.
Mga komento
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION