Kurs Java

Thymeleaf / JSP & JSTL

Tu jesteś
Java - Mapa kariery Tu jesteś 10 Bootstrap - Material 11 Javascript 12 Typescript 13 Angular / React / Vue.js 14 Aplikacja Webowa / Mikroserwisy
[FULLSTACK]
StartAPPa
Thymeleaf / JSP + JSTL
Te rozwiązania pozwalają na układanie
fragmentów HTML-a po stronie serwera.
Wspierają takie zagadnienia jak
iteracyjne generowanie wielu elementów
widoku oraz potrafią współpracować
ze Spring MVC, przez co są ciekawą
alternatywą dla frontendu odseparowanego
od Springa i działającego po stronie
przeglądarki (tak jak w Angularze)
Co ciekawe Thymeleaf można stosować
również razem z Angularem czy Reactem.
jQuery
Przystanek Fullstack
Zanim pojawił się Typescript i Angular,
programowanie kodu działającego po
stronie przeglądarki wykonywane było
najczęściej za pomocą jQuery.
Obecnie jQuery jest używane w starych
systemach oraz służy jako dodatkowe
wsparcie dla Angulara oraz Typescriptu.
Niemniej, zgodnie z dobrymi praktykami,
nie zaleca się mieszania tych rozwiązań.
Thymeleaf to silnik szablonów umożliwiający budowę elementów interfejsu użytkownika po stronie serwera (backendu). Co ciekawe znajduje też zastosowanie w budowie aplikacji, które nie są webowe. Pozwala definiować własne atrybuty szablonów lub znaczników, jednak domyślnie zawiera standardowe dialekty (Standard i SpringStandard), które definiują bogaty zestaw funkcjonalności.

Standardowe dialekty są łatwe do rozpoznania, gdyż zawierają atrybuty zaczynające się od przedrostka th. Thymeleaf może być integrowany ze Springiem (dialekt SpringStandard) i to z pewnością jego duża zaleta. Lekko zmodyfikowany przykład ze strony Thymeleaf & Spring Tutorial:
<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}">
    
  <h2 th:text="#{title.list}">List of Seed Starters</h2>
  
  <table>
    <thead>
      <tr>
        <th th:text="#{seedstarter.datePlanted}">Date Planted</th>
        <th th:text="#{seedstarter.covered}">Covered</th>
        <th th:text="#{seedstarter.type}">Type</th>
        <th th:text="#{seedstarter.features}">Features</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="sb : ${allSeedStarters}">
        <td th:text="${{sb.datePlanted}}">13/01/2011</td>
        <td th:text="#{|bool.${sb.covered}|}">yes</td>
        <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td>
        <td th:text="${#strings.arrayJoin(
                           #messages.arrayMsg(
                               #strings.arrayPrepend(sb.features,'seedstarter.feature.')),
                           ', ')}">Electric Heating, Turf</td>        
      </tr>
    </tbody>
  </table>
</div>                    
Kod Springa przechowujący dane jest dostępny na wyżej wspomnianej stronie.

Minusy

W przypadku wielu systemów ważna jest ich efektywność, również w kontekście danych przesyłanych przez sieć. Często nie jest wskazane obciążanie sieci dodatkowymi informacjami, które w tym wypadku są przesyłane, a na dobrą sprawę wydają się zbędne. Przykładowo jeśli chcemy stworzyć tabelkę wyświetlającą dane (tak jak w przykładzie wyżej), to generowanie znaczników table, thead, tr, td po stronie backendu stanowi treść zwiększającą rozmiar odpowiedzi. Nie są to dane, tylko struktury czysto techniczne. Według nas lepiej jest wysyłać jedynie to, co faktycznie jest niezbędne, a budowanie widoków i zarządzanie nimi zostawić frameworkom działającym po stronie frontendu.

Thymeleaf jest silnie związany z warstwą serwerową i jeśli nastąpi nagła potrzeba oddzielenia frontendu od backendu to mamy problem. Nie postawimy frontendu i backendu na osobnych maszynach. Może to być dużą przeszkodą, szczególnie że w dobie szybko zmieniających się koncepcji, taka sytuacja prędzej czy później wydaje się być nieunikniona.

Plusy

Oczywiście nie oznacza to, że Thymeleaf jest rozwiązaniem złym. W przypadku miejsc, w których trudno o frontendowca lub fullstack dewelopera, może okazać się rozwiązaniem wyjątkowo skutecznym. Natomiast na podstawie wywiadu środowiskowego (w czasach kiedy jeszcze prowadziliśmy korepetycje z programowania w Javie) wynika, że sukcesywnie maleje liczba miejsc, w których tworzy się oprogramowanie z użyciem Thymeleaf. Najczęściej używany jest on do systemów działających w zamkniętej sieci i nie wymagających zwiększonej wydajności. W przypadku aplikacji, co do których nie ma wielkich oczekiwań od strony wizualnej i zwyczajne dobre ostylowanie w zupełności wystarcza, użycie Thymeleaf może okazać się rozsądnym wyborem.

JSP & JSTL

Ten zestaw technologii również pozwala na budowanie widoku po stronie backendu i zwrócenie go w postaci odpowiedzi do przeglądarki. Swego czasu było to dosyć popularne rozwiązanie, dzisiaj dużo rzadziej stosowane. Wymaga poznania i łączenia ze sobą dwóch technologii, co samo w sobie nie brzmi najlepiej. Nie jest to też silnik szablonów tak jak Thymeleaf, a do tego pisanie w JSP, to nie to samo co tworzenie w HTML-u.

Zobaczmy teraz jak wygląda taki przykładowy fragment pliku JSP wyciągniętego z jednego z naszych starych projektów (oczywiście po zmianie wszystkich nazw własnych i bez ogólnej logiki biznesowej). W pierwszych liniach najpierw definiujemy ustawienia strony oraz pakiety Java, których chcemy używać (bo w plikach JSP można używać kodu Java). Później mamy biblioteki tagów taglib (JSTL i Spring). Następnie korzystamy z tagu JSTL ustawiającego wartości kolejnych zmiennych <c:set/>:
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ page import="java.util.*, java.lang.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

...

<c:set var="columnsNumber" value="${4}" />
<c:set var="categoriesNumber" value="${categories['categoriesNumber']}" />
<c:set var="categoriesArr" value="${categories['categoriesArr']}" />
<c:set var="rowNumber" value="0" />

...

<fieldset>
    <legend class="app-legend">
        <spring:message code="fieldset.legend.categories" /> *
    </legend>
    
    <c:forEach var="i" begin="0" end="${categoriesNumber-1}">
        <c:set var="category" value="${categoriesArr[i]}" />
        <c:if test="${i%columnsNumber==0}">
            <div class="row">
        </c:if>
        <div class="col-sm-3">
            <input type="checkbox" name="categoriesIds" id="${category.id}" value="${category.id}" 
            ${category.checked} class="some-checkbox"/>
            <span><c:out value="${category.name}"/></span>
        </div>
        <c:if test="${(i%columnsNumber)==(columnsNumber-1)}">
            </div>
        </c:if>
    </c:forEach>
</fieldset>                 
Wykonujemy tutaj pętle (za pomocą kolejnego tagu JSTL), która wyświetla na stronie checkboxy z nazwami kategorii. Jak widać mamy w jednym pliku mix kilku technologii: JSP, Java, JSTL, a nawet Spring (Springowe biblioteki tagów). Dla nas taki kod nie jest przyjazny do czytania, czy też aktualizowania. A jakie jest Wasze zdanie? :)

Podsumowanie

Temat wywołuje czasem gorące dyskusje, szczególnie wśród programistów, którzy bardzo polubili jedną z technologii i wyciągają z niej maksimum potencjału (a każda ma swoje zalety). Jednak prawdą jest też, że w ostatnich latach firmy w swoich ofertach pracy raczej skłaniają się ku nieco innym technologiom. Szczególnie w dużych korporacjach poszukiwani są przede wszystkim specjaliści od Angulara czy Reacta.

Natomiast, działające od lat systemy również wymagają utrzymania, więc na pewno znajdziemy oferty oczekujące znajomości Thymeleaf czy JSP. Za tym pierwszym przemawia jeszcze fakt, że jest on wspierany i promowany przez Springa, a to dość znaczący argument.
Appa Notka. Rozważamy wprowadzenie kolejnych materiałów w tej sekcji. Na chwilę obecną proponujemy kilka ciekawych linków, które pomogą Ci wystartować z tematem:
Projekt Thymeleaf
Thymeleaf - Szybki start
Thymeleaf & Spring Tutorial
Spring Boot Thymeleaf
Wprowadzenie do JSTL
Mapa umiejętności programisty Java

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy: stackshare
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .


Pozycjonowanie stron: Grupa TENSE