Dlaczego JSX jest dobry, gdy skrypty JSP są złe?

React.js zapewnia JSX jako składnię podobną do XHTML do konstruowania drzewa komponentów i elementów. JSX kompiluje się w Javascripcie, a zamiast dostarczania pętli lub warunków w JSX, używasz Javascript bezpośrednio:

<ul>
  {list.map((item) =>
    <li>{item}</li>
  )}
</ul>

Nie byłem jeszcze w stanie wyjaśnić, dlaczego uważa się to za dobre, jeśli analogiczne konstrukcje są uważane za złe w JSP?

Coś takiego w JSP

<ul>
   <% for (item in list) { %>
     <li>${item}</li>
   <% } %>
</ul>

uważa się za problem z czytelnością, który należy rozwiązać za pomocą tagów takich jak <c:forEach>. Rozumowanie za tagami JSTL również wydaje się mieć zastosowanie do JSX:

• jest trochę łatwiejszy do odczytania, gdy nie przełączasz się między składnią podobną do XHTML (nawiasy kątowe, zagnieżdżanie) i Java / JavaScript (curlies, przecinki, parens)
• kiedy masz do dyspozycji pełny język i platformę do użycia w funkcji renderowania, nie musisz już zniechęcać do wprowadzania logiki, która tam nie należy.

Jedyne powody, dla których mogę wymyślić, dlaczego JSX jest inny, to:

• w Javie miałeś motywację do zrobienia czegoś złego - JSP zostałby ponownie załadowany na gorąco, więc kuszenie było umieszczenie kodu w JSP, aby uniknąć cyklu odbudowywania / restartowania. Utrzymanie poświęcono dla natychmiastowej produktywności. Usunięcie skryptletów i ograniczenie do ustalonego zestawu konstrukcji szablonów było skutecznym sposobem na wymuszenie łatwości konserwacji. W świecie JS nie ma takich zniekształceń.

• Składnia JSP i Java jest nieporęczna, ponieważ <% ... %>pozwala odróżnić kod Java od generowania elementów, a natywna składnia Java nie ma foreachkoncepcji ani funkcji pierwszej klasy (do niedawna). Kara składniowa za używanie natywnego Javascript dla pętli i instrukcji warunkowych w JSX jest niezerowa (moim zdaniem), ale nie tak zła jak JSP i prawdopodobnie niewystarczająca, aby uzasadnić wprowadzenie elementów specyficznych dla JSX dla pętli i instrukcji warunkowych.

Czy brakuje mi czegoś jeszcze?

Przede wszystkim ludzie, którzy stworzyli JSX, nie zgadzali się z ludźmi, którzy nie lubili JSP. Zobacz ich dyskusję tutaj: Dlaczego stworzyliśmy React? a także Wyświetlanie danych

Szablony oparte są na pomyśle stworzenia podziału między logiką a prezentacją strony. Zgodnie z tą teorią, twój kod javascript (lub java) nie powinien przejmować się tym, co wyświetla kod, a twój kod nie powinien dotyczyć żadnej logiki. Podział ten jest zasadniczo powodem, dla którego ludzie krytykują różne języki szablonów, które z łatwością pozwalały na mieszanie kodu z szablonem (PHP / JSP / ASP).

React opiera się na komponentach. Autorzy reakcji twierdzą, że logika i prezentacja komponentu są ze sobą ściśle powiązane, a próba ich podziału nie ma żadnego sensu. Zamiast tego stronę należy podzielić na logiczne elementy. Możesz więc podzielić pasek nagłówka, komentarze, posty, powiązane pytania itp. Na osobne elementy. Ale próba podzielenia logiki powiązanych pytań z prezentacji nie ma sensu.

Podstawowa różnica między czymś takim jak JSX a czymś takim jak JSP polega na tym, że JSP to język szablonów, który zawiera trochę java dla logiki. JSX to javascript z rozszerzeniem składni, aby ułatwić konstruowanie fragmentów HTML. Nacisk jest inny. Ponieważ JSX przyjmuje to podejście, w rezultacie uzyskuje się ładniejsze, czystsze podejście niż JSP lub przyjaciele.

Ale ostatecznie sprowadza się to do tego, że ludzie, którzy zareagowali, nie lubili szablonów. Uważają, że to zły pomysł i że powinieneś umieścić logikę znaczników i prezentacji w tym samym miejscu.

Jako outsider React, widziałem JSX jako kolejny „zapach ramowy” w bardzo zatłoczonym zoo cuchnących ramami. Nadal nie jestem przekonany, że tak nie jest.

Myślę, że praktyczną definicją „użytecznego” jest to, że biblioteka / framework / wzorzec rozwiązuje więcej problemów niż powoduje. Nie jestem jeszcze przekonany, czy JSX pasuje do tej definicji. Jest to przysłowiowe „ściskanie balonu” ... tutaj rozwiązujesz problem, wyskakuje tam. Dla mnie JSX nie rozwiązuje żadnego konkretnego problemu ... jest po prostu „inny”.

Pojęcie wprowadzenia kompilowalnej semantyki, która wymaga sformalizowanego procesu kompilacji, jest przydatne w niektórych okolicznościach: na przykład kompilacja LESS plików .css zapewnia bardzo potrzebną strukturę wokół css, która jest strukturą hierarchiczną z importami i nadpisaniami, a zatem będąc bardzo podatnym na „rozwiązania spaghetti”. Ale prekompilatory Javascript ... nie bardzo.

W skrócie:

• Od programistów front-end oczekuje się znajomości skryptów i szablonów
• JSX i JSP są językami szablonów
• JavaScript jest językiem skryptowym
• Java nie jest językiem skryptowym

Bibliografia

• Czy rozdzielanie HTML i JavaScript jest szkodliwe? | Bitnative autorstwa Cory House

• Dlaczego skrypty są uważane za szkodliwe i jak wyłączyć skrypty w programie?

• Jak uniknąć kodu Java w plikach JSP? - Przepełnienie stosu

Chociaż nie używam JSX, na podstawie twojego opisu, zadaniem fragmentu JSX jest prezentacja danych, to znaczy jest to komponent widoku w języku MVC. Fragment JSX prawdopodobnie nie wie ani nie obchodzi, skąd pochodzą dane, z czego chcesz.

Dobrze zorganizowana strona JSP będzie zawierać tylko dyrektywy JSTL, tak jak wspomniałeś. Dyrektywy JSTL po prostu upraszczają pliki JSP, aby nie były zaśmiecone pobieraniem z zakresu, sprawdzaniem wartości zerowej itp. Zaskakujące jest, jak dużo bałaganu to usuwa, a także zachęca do jego uporządkowania.

Podobnie jak fragment JSX; jedynym zadaniem JSP powinno być ustalenie sposobu prezentacji otrzymanych danych, bez obawy o to, skąd one pochodzą.

Podsumowując, niezależnie od tego, czy Twój widok to JSX czy JSP, jeśli robisz to poprawnie, Twój widok po prostu przedstawia dane.

To, dlaczego możesz przenieść prezentację do klienta zamiast robić to na serwerze, daje to większą elastyczność. Twoja strona internetowa może uzyskiwać dane za pośrednictwem usług internetowych (na przykład ReST) i być tylko kolejnym klientem. Jeśli później zdecydujesz, że chcesz mieć natywną aplikację na Androida lub iOS, mogą one korzystać z tego samego zestawu usług internetowych, co Twoja witryna.