Historia Frontendu

4.1 Historia rozwoju webowego: od HTML do HTML5 i CSS3

Na początku lat 90. świat zobaczył narodziny rozwoju webowego dzięki Timowi Bernersowi-Lee. To on w zasadzie był pierwszym frontendowcem: sam wymyślił HTML i na nim pisał, sam stworzył pierwszą przeglądarkę. Prawdziwy frontendowiec nie da się zatrzymać nawet brakiem przeglądarki.

CSS i JavaScript jeszcze wtedy nie istniały, więc tworzenie stron było prostsze. Można powiedzieć, że Tim Berners-Lee — to pierwszy stary wyjadacz, który zajmował się frontendem jeszcze przed tym waszym JavaScriptem i CSS-em.

W 1995 roku Internet Engineering Task Force (IETF) zatwierdziła HTML 2.0 jako pierwszy oficjalny standard HTML. Ta wersja zawierała podstawowe tagi i atrybuty, które pozwalały na tworzenie bazowych stron internetowych. HTML 2.0 położył fundamenty dla dalszego rozwoju webowego.

HTML 3.2 i HTML 4.0: rozszerzenie możliwości

Rok 1997 był ważnym krokiem w historii HTML. W tym roku został opublikowany HTML 3.2, opracowany przez konsorcjum W3C. Ta wersja zawierała wsparcie dla tabel, apletów Java i formuł matematycznych, co znacznie rozszerzyło możliwości developerów internetowych.

Później tego samego roku pojawił się HTML 4.0, który przyniósł znaczne ulepszenia. Wprowadzenie wsparcia dla stylów CSS, ulepszona semantyka i nowe elementy uczyniły HTML 4.0 potężnym narzędziem do tworzenia bardziej złożonych i strukturalnych stron internetowych. Wprowadzenie stylów CSS pozwoliło developerom oddzielić zawartość od jej wyglądu, co ułatwiło zarządzanie stylami i uprościło implementację designu.

CSS: rewolucja w stylizacji stron internetowych

Pierwszy standard CSS (Cascading Style Sheets) został opublikowany przez W3C w 1996 roku. CSS pozwolił developerom stylizować dokumenty HTML, oddzielając elementy wizualne od struktury strony. CSS1 oferował podstawowe możliwości stylizacji tekstu i obrazów tła.

W 1998 roku został przedstawiony CSS2, który dodał nowe możliwości, takie jak wsparcie dla media queries, absolutne i względne pozycjonowanie, a także bardziej złożone style dla wydruków.

CSS3, który zaczął się pojawiać w 2011 roku, zaprezentował modułową architekturę. To pozwoliło na wprowadzanie nowych funkcji etapami, w tym animacji, gradientów, transformacji i ulepszonych układów.

HTML5: nowa era webowego rozwoju

HTML5, opracowany wspólnymi siłami WHATWG i W3C, stał się znaczną aktualizacją i został oficjalnie przedstawiony w 2014 roku. HTML5 dodał wsparcie dla multimediów (wideo i audio), nowych elementów dla ulepszonej semantyki (takich jak <article>,<section>,<header>,<footer>), ulepszone formaty dla formularzy internetowych i nowe API do pracy z grafiką i wielowątkowością.

HTML5 znacznie rozszerzył możliwości web-developerów, pozwalając tworzyć bardziej interaktywne i dynamiczne aplikacje webowe. Wsparcie dla elementów multimedialnych i nowych API uczyniło aplikacje webowe bardziej potężnymi i funkcjonalnymi.

4.2 Od jQuery do Angular i React

Im szybszy był internet, tym cięższe stawały się strony internetowe. Tym więcej było w nich CSS i JavaScriptu. Aby jakoś uprościć jego pisanie, zaczęto używać różnych bibliotek. Jedną z najbardziej popularnych stała się jQuery.

jQuery: Łatwość pracy z JavaScript

jQuery został stworzony przez Johna Resiga i wydany w styczniu 2006 roku na konferencji BarCamp w Nowym Jorku. Celem jQuery było uproszczenie interakcji z dokumentami HTML, obsługi zdarzeń, animacji i interakcji Ajax dla szybkiego rozwoju internetowego.

jQuery szybko stał się popularny dzięki prostym i intuicyjnym metodom, które ukrywały złożoności pracy z JavaScript i problemami z różnorodnością przeglądarek. Główne jego funkcje obejmują:

• Selektory, które pozwalały łatwo znaleźć i manipulować elementami DOM
• Prostą pracę z zdarzeniami
• Animacje i efekty
• Integrację z Ajax do tworzenia interaktywnych stron internetowych

jQuery zmienił podejście do rozwoju internetowego, czyniąc go bardziej dostępnym i wygodnym dla developerów.

Angular: Wprowadzenie do dynamicznych aplikacji webowych

Kolejną odpowiedzią na rosnącą złożoność stron internetowych było pojawienie się frameworka Angular. AngularJS został po raz pierwszy przedstawiony przez Google w październiku 2010 roku. Projekt został stworzony przez Miško Hævri i Adam Abrons w celu uproszczenia rozwoju dynamicznych aplikacji jednostronicowych (SPA).

AngularJS dostarczył potężne narzędzia do rozwoju frontendu, w tym:

• Deklaratywne wiązanie danych przez dyrektywy
• Wbudowane usługi do pracy z zapytaniami HTTP
• Dwustronne wiązanie danych, pozwalające automatycznie aktualizować widok przy zmianie danych modelu
• Modularność i testowalność kodu

W 2016 roku Google przedstawił całkowicie przebudowaną wersję Angular (Angular 2 i wyżej), która stała się platformą do rozwoju skalowalnych i wysokowydajnych aplikacji webowych z użyciem TypeScript.

React: Rewolucja w renderowaniu UI

React został stworzony przez Jordana Walke z Facebooka i po raz pierwszy wydany w marcu 2013 roku. React stał się odpowiedzią na potrzeby Facebooka w zwiększeniu wydajności i wsparciu złożonych interfejsów użytkownika.

React zaprezentował nowe podejście do rozwijania interfejsów użytkownika, oparte na komponentach i wirtualnym DOM:

• Architektura komponentowa, pozwalająca tworzyć wielokrotnego użytku i izolowane komponenty
• Wirtualny DOM, który optymalizuje aktualizację interfejsu, czyniąc go szybszym i wydajniejszym
• Jednostronne wiązanie danych, co upraszcza debugowanie i zarządzanie stanem aplikacji

React szybko zdobył popularność i stał się podstawą dla wielu nowoczesnych aplikacji webowych dzięki swojej wydajności i elastyczności. Stał się również podstawą dla innych bibliotek i frameworków, takich jak React Native dla aplikacji mobilnych.

Te trzy technologie — jQuery, Angular i React — odegrały kluczowe role w ewolucji rozwoju internetowego, każda z nich wprowadziła swoje unikalne podejścia i narzędzia, które znacznie uprościły tworzenie współczesnych aplikacji webowych.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 stały się tak potężnymi technologiami, że Web wylał się poza przeglądarkę i stał się pełnoprawną technologią Frontend Fullstack. I pierwsze to poczuło backend.

Node.js: przejęcie backendu

Node.js został stworzony przez Ryana Dahla i po raz pierwszy wydany w maju 2009 roku. Głównym celem Node.js jest dostarczenie środowiska wykonawczego dla JavaScript poza przeglądarką, co pozwala używać JavaScript do rozwoju serwerowego. Node.js zbudowany jest na silniku V8 od Google, co zapewnia wysoką wydajność i szybkość wykonania.

Node.js używa nieblokującego I/O (input/output, wejście/wyjście), co pozwala na obsługę wielu połączeń jednocześnie, nie blokując głównego wątku wykonania. Ma również bogaty ekosystem modułów dostępnych przez npm (Node Package Manager), co ułatwia rozwój i integrację różnych bibliotek i narzędzi. Dzięki silnikowi V8, Node.js zapewnia szybką i efektywną obsługę zapytań.

Electron: przejęcie desktopów

Pisanie fajnego UI dla desktopu to niezłe wyzwanie, a tutaj mamy pod ręką HTML5+CSS3. Można by go wykorzystać… Dlatego programiści wymyślili lifehack: Twoja aplikacja otwiera główne okno, do tego okna wstawiany jest przeglądarka (komponent VebView), a do tej przeglądarki ładowany jest kod w HTML5, CSS3 + JavaScript.

Biblioteka Electron, pierwotnie znana jako Atom Shell, została stworzona przez GitHub dla edytora kodu Atom. Pierwsza wersja Electron została wydana w lipcu 2013 roku. Celem Electron jest umożliwienie developerom tworzenia aplikacji desktopowych z użyciem technologii webowych, takich jak HTML, CSS i JavaScript.

Electron pozwala na tworzenie aplikacji, które działają na Windows, macOS i Linux z jedną i tą samą bazą kodu. Electron łączy w sobie możliwości technologii webowych i moc Node.js, co pozwala na dostęp do systemu plików i innych zasobów systemowych. Developerzy mogą używać istniejących frameworków i bibliotek webowych do tworzenia interfejsów i funkcjonalności.

React Native: aplikacje mobilne

React Native został opracowany przez Facebook i po raz pierwszy przedstawiony w marcu 2015 roku. Celem React Native jest umożliwienie tworzenia natywnych aplikacji mobilnych dla iOS i Android z użyciem JavaScript i React.

React Native używa natywnych komponentów, co zapewnia wydajność porównywalną z natywnymi aplikacjami. Jednocześnie developerzy mogą pisać kod, który działa zarówno na iOS, jak i Android, co znacznie upraszcza rozwój i skraca czas na wsparcie.

To samo co w przypadku Electron: na całe okno aplikacji mobilnej otwiera się VebView, do którego ładowany jest „sajt”, napisany w HTML5, CSS3 i JS. Wszyscy myśleli, że aplikacje mobilne wypchną strony internetowe na telefonach, a stało się zupełnie odwrotnie: strony zaczęły wypierać natywne aplikacje.

Dzisiaj Frontend Fullstack Software Engineer — to najbardziej poszukiwany zawód w IT na świecie. Tak że decyzja o zostaniu Frontend Developerem jest trafna i dalekowzroczna!