Tu jesteś
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.
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.
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ń.
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:
Kod Springa przechowujący dane jest dostępny na wyżej wspomnianej stronie.
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.
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/>:
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? :)
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
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>
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>
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
Nie jesteś biegły w Javie?
Zobacz nasz kurs programowania Java
Interesuje Cię szerszy zakres wiedzy?
Zerknij na Java board
Polub nas na
Facebooku:
Kliknij O nas .
Pozycjonowanie stron: Grupa TENSE