Coraz więcej technologii i wymagań, coraz mniej czasu.

Zastanawiałeś się kiedyś jak trudne jest dla webmastera tworzenie witryn WWW obecnie i jak się to ma do porównania z tym, co mieliśmy w przeszłości, którą z wielu z nas przecież pamięta?

Co ważne, nie chodzi tylko o JavaScript, to nie jest nawet takie trudne. Właściwie JS jest dość prostym językiem. Rzuć jednak okiem na całą resztę: CSS, bundlery, frameworki, node czy npm… jak doszło do tej sytuacji? Zbadajmy to na osi czasu rozwoju sieci.

Początek lat 90: narodził się Internet

• Standardowy stos technologiczny: początki HTML (który był niezwykle prosty), hosting (dziwny wynalazek tamtych czasów)
• Opcjonalne technologie z rodzaju cutting-edge: kompresja obrazu (kluczowa w tym momencie, a nawet znacznie później, choć niewiele osób ją opanowało)
• Dlaczego to musiało się zmienić: wczesny HTML został stworzony do wymiany artykułów naukowych, a nie dla komercyjnych stron internetowych, które zaczęły się pojawiać. Prywatne strony internetowe naciskały na pewną interaktywność, wskazując kierunek, w którym sieć będzie miała swój pierwszy komercyjny boom.

Późne lata 90: pierwsze strony internetowe oparte na serwerze

• Standardowy stos technologiczny: ten sam HTML (dodanie CSS zajęło dużo czasu), osadzanie skryptów CGI/Perl (głównie liczniki lub obsługa formularzy), hosting
• Opcjonalne technologie z rodzaju cutting-edge: PHP, hosting, JS (wtedy bardzo słaby i drugorzędny język skryptowy), Flash, kompresja obrazu, skrypty CGI/Perl, aplety Java
• Dlaczego to musiało się zmienić: komercyjne serwisy „usługowe” zaczęły generować mnóstwo pieniędzy i generować wiele wymagań, którym skrypty CGI/Perl nie były w stanie sprostać (np. dynamiczna zawartość strony). Ponadto HTML miał wiele ograniczeń dotyczących budowania układów i dobrego zarządzania interaktywnością.

Wczesne lata 2000: Pełna przepustowość stron renderowanych przez serwer server

• Standardowy stos technologiczny: HTML, PHP, Flash, trochę CSS i trochę JS dla jakiejś „magii”, hosting
• Opcjonalne technologie z rodzaju cutting-edge: zaawansowany wczesny JS, zaawansowany CSS, koncepcje SEO (głównie metatagi HTML), skrypty Flash (ActionScript), oczyszczanie danych, aplety Java, kompresja obrazów
• Dlaczego to musiało się zmienić: pomimo dynamicznej zawartości, interaktywność po stronie klienta w sieci nadal pozostawiała wiele do życzenia. JS był zbyt trudny dla złożonych aplikacji ze względu na duże różnice między przeglądarkami (z czym JQuery bardzo dobrze sobie później poradził) a Flash był po prostu zbyt wolny do tego (a potem dodatkowo - jak się okazało – niebezpieczny).

Do tego czasu nie istniało wyraźne rozróżnienie między backendem a frontendem i większość osób pracujących „w webie” zawodowo mogła robić obie te rzeczy. Od tego momentu to rozróżnienie zaczęło być wyraźniejsze.

Późne lata 2000: JQuery królem

• Standardowy stos technologiczny: semantyczny HTML (w tym momencie ważny dla Google), CSS, JS z AJAX i JQuery (i znajomość niektórych dziwactw Internet Explorera), Flash, wersjonowanie (SVN lub Git)
• Opcjonalne technologie z rodzaju cutting-edge: JQuery UI, SEO (teraz to w zasadzie odrębna dziedzina wiedzy), skrypty Flash, CDN, hosting, kompresja obrazu, znajomość większości dziwactw Internet Explorera ;-)
• Dlaczego to musiało się zmienić: sieć szła w kierunku aplikacji jednostronicowych i chociaż JQuery na to pozwala, to sprawia też, że tworzenie jest bardzo pracochłonnym procesem, trudnym zwłaszcza w przypadku większych projektów.

Początek lat 2010: SPA i Angular

• Standardowy stos technologiczny: semantyczny HTML, CSS, JS, Angular.js v1, CDN, GIT, CI/CD, Jasmine/Mocha
• Opcjonalne technologie z rodzaju cutting-edge: Ember, Knockout.js, Babel.js i nowe funkcje JS, Node.js, NPM, bash (tak, tak), Bootstrap, Underscore.js, Bower.js
• Dlaczego to musiało się zmienić: Angular.js v1 okazał się zbyt wolny. Ponadto wskutek małej popularności pakietów utrzymanie większego projektu internetowego ciągle było trudnym zadaniem.

Późne lata 2010 (do teraz): React przejmuje koronę

• Standardowy stos technologiczny: semantyczny HTML, CSS z SASS, JS z nowszą składnią (ECMAScript201X), React (lub Vue.js/Angular.js), Redux (lub VueX), NPM, Webpack (podstawowy), GIT, CI /CD, Enzyme (wcześniej) i React Testing Library (obecnie).
• Opcjonalne technologie z rodzaju cutting-edge: TypeScript (prawie staje się standardem), CSS-in-JS, Tailwind, Bootstrap, Node.js, zaawansowany Webpack lub inne bundlery (Parcel, Rollup, Snowpack), nowe funkcje Babel.js i JS, Cypress/Puppeteer lub inne narzędzia testowe E2E, Next.js.

Wyliczanka spora, prawda? „Takie czasy”, że obecnie webmasterzy sięgają nawet po Pythona.