Історія Frontend

4.1 Історія веб-розробки: від HTML до HTML5 і CSS3

На початку 1990-х років світ побачив народження веб-розробки завдяки Тіму Бернерсу-Лі. Він взагалі був першим Frontend-розробником: сам придумав HTML і сам на ньому писав, сам створив перший браузер. Справжнього фронтендера не зупинить навіть відсутність браузера.

Хоча CSS і JavaScript тоді ще не придумали, тому створювати сайти було простіше. Можна сказати, що Тім Бернерс-Лі — перший олдскульний розробник, який займався Frontend-ом до от цих ваших JavaScript і CSS.

У 1995 році Internet Engineering Task Force (IETF) затвердила HTML 2.0 як перший офіційний стандарт HTML. Ця версія включала основні теги та атрибути, які дозволяли створювати базові веб-сторінки. HTML 2.0 заклав фундамент для подальшого розвитку веб-розробки.

HTML 3.2 та HTML 4.0: розширення можливостей

1997 рік став важливим етапом в історії HTML. У цьому році було випущено HTML 3.2, розроблений консорціумом W3C. Ця версія включала підтримку таблиць, аплетів Java і математичних формул, що значно розширило можливості веб-розробників.

Пізніше в тому ж році з'явився HTML 4.0, який приніс значні покращення. Включення підтримки стилів CSS, покращена семантика і нові елементи зробили HTML 4.0 потужним інструментом для створення більш складних і структурованих веб-сторінок. Введення стилів CSS дозволило розробникам відокремити контент від його вигляду, що полегшило управління стилями і спростило реалізацію дизайну.

CSS: революція в стилізації веб-сторінок

Перший стандарт CSS (Cascading Style Sheets) був випущений W3C в 1996 році. CSS дозволив розробникам стилізувати HTML-документи, відокремлюючи візуальні елементи від структури сторінки. CSS1 запропонував базові можливості для стилізації тексту і фонових зображень.

У 1998 році був представлений стандарт CSS2, який додав нові можливості, такі як підтримка медіазапитів, абсолютне і відносне позиціонування, а також більш складні стилі для друку.

CSS3, який почав з'являтися в 2011 році, представив модульну архітектуру. Це дозволило впроваджувати нові функції поетапно, включаючи анімації, градієнти, трансформації та покращені макети.

HTML5: нова ера веб-розробки

HTML5, розроблений спільними зусиллями WHATWG і W3C, став значним оновленням і був офіційно представлений в 2014 році. HTML5 додав підтримку мультимедіа (відео та аудіо), нових елементів для покращеної семантики (таких як <article>,<section>,<header>,<footer>), покращені формати для веб-форм і нові API для роботи з графікою і багатопоточністю.

HTML5 значно розширив можливості веб-розробників, дозволивши створювати більш інтерактивні та динамічні веб-застосунки. Підтримка мультимедійних елементів і нових API зробила веб-застосунки більш потужними і функціональними.

4.2 Від jQuery до Angular і React

Чим швидше був інтернет, тим важчими ставали веб-сторінки. Тим більше в них було CSS і JavaScript. Щоб якось спростити його написання, почали використовувати різні бібліотеки. Однією з найбільш популярних стала jQuery.

jQuery: Зручність роботи з JavaScript

jQuery був створений Джоном Резігом і випущений у січні 2006-го року на конференції BarCamp у Нью-Йорку. Метою jQuery було спростити взаємодію з HTML-документами, обробку подій, анімації і Ajax-взаємодію для швидкої веб-розробки.

jQuery швидко став популярним завдяки простим і інтуїтивно зрозумілим методам, які приховували складнощі роботи з JavaScript та кросбраузерні проблеми. Основні його функції включають:

• Селектори, які дозволяли легко знаходити та маніпулювати елементами DOM
• Просту роботу з подіями
• Анімації та ефекти
• Інтеграцію з Ajax для створення інтерактивних веб-сторінок

jQuery змінив підхід до веб-розробки, зробивши її більш доступною і зручною для розробників.

Angular: Введення у динамічні веб-застосунки

Ще однією відповіддю на зростаючу складність веб-сторінок стало появлення фреймворку Angular. AngularJS був вперше представлений Google у жовтні 2010 року. Проєкт був створений Мішко Хевері і Адамом Абрамсом для спрощення розробки динамічних односторінкових застосунків (SPA).

AngularJS надав потужні інструменти для розробки клієнтської частини, включаючи:

• Декларативне зв'язування даних через директиви
• Вбудовані сервіси для роботи з HTTP-запитами
• Двостороннє зв'язування даних, що дозволяє автоматично оновлювати view при зміні даних моделі
• Модульність і тестованість коду

У 2016 році Google представив повністю перероблену версію Angular (Angular 2 і вище), яка стала платформою для розробки масштабованих і високопродуктивних веб-застосунків з використанням TypeScript.

React: Революція в рендерингу UI

React був створений Джорданом Волке з Facebook і вперше випущений у березні 2013 року. React став відповіддю на потреби Facebook в покращенні продуктивності і підтримці складних користувацьких інтерфейсів.

React представив новий підхід до розробки користувацьких інтерфейсів, заснований на компонентах і віртуальному DOM:

• Компонентна архітектура, що дозволяє створювати багаторазові і ізольовані компоненти
• Віртуальний DOM, який оптимізує оновлення інтерфейсу, роблячи його швидшим і ефективнішим
• Одностороннє зв'язування даних, що спрощує налагодження і управління станом застосунку

React швидко завоював популярність і став основою для розробки багатьох сучасних веб-застосунків завдяки своїй продуктивності і гнучкості. Він також став основою для інших бібліотек і фреймворків, таких як React Native для мобільних застосунків.

Ці три технології — jQuery, Angular і React — зіграли ключову роль в еволюції веб-розробки, кожна з них внесла свої унікальні підходи та інструменти, які значно спростили створення сучасних веб-застосунків.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 стали настільки потужними технологіями, що Web виплеснувся за рамки браузера і став повноцінною Frontend Fullstack технологією. І першим це відчув backend.

Node.js: захоплення бекенду

Node.js був створений Райаном Далем і вперше випущений в травні 2009 року. Головна мета Node.js — надати середовище виконання для JavaScript поза браузером, що дозволяє використовувати JavaScript для серверної розробки. Node.js побудований на двигуні V8 від Google, що забезпечує високу продуктивність і швидкість виконання.

Node.js використовує неблокуючий I/O (input/output, введення/виведення), що дозволяє обробляти багато з'єднань одночасно, не блокуючи головний потік виконання. Також має обширну екосистему модулів, доступних через npm (Node Package Manager), що спрощує розробку та інтеграцію різних бібліотек і інструментів. А завдяки двигуну V8, Node.js забезпечує швидку й ефективну обробку запитів.

Electron: захоплення десктопів

Писати крутий UI для десктопа — та ще задачка, а тут під рукою є HTML5+CSS3. Ось його б використовувати… Тому програмісти придумали лайфхак: у вашого застосунку відкривається головне вікно, в це вікно вбудовується браузер (компонент WebView), а в цей браузер завантажується код на HTML5, CSS3 + JavaScript.

Бібліотека Electron, спочатку відома як Atom Shell, була створена GitHub для редактора коду Atom. Першу версію Electron випустили в липні 2013 року. Мета Electron — дозволити розробникам створювати настільні застосунки з використанням веб-технологій, таких як HTML, CSS і JavaScript.

Electron дозволяє створювати застосунки, які працюють на Windows, macOS і Linux з однією і тією ж кодовою базою. Electron поєднує в собі можливості веб-технологій і потужність Node.js, що дозволяє доступ до файлової системи і інших системних ресурсів. Розробники можуть використовувати існуючі веб-фреймворки і бібліотеки для створення інтерфейсів і функціональності.

React Native: мобільні застосунки

React Native був розроблений Facebook і вперше представлений у березні 2015 року. Мета React Native — надати можливість створювати нативні мобільні застосунки для iOS і Android з використанням JavaScript і React.

React Native використовує нативні компоненти, що забезпечує продуктивність, порівнянну з нативними застосунками. Водночас розробники можуть писати код, який працює як на iOS, так і на Android, що значно спрощує розробку і скорочує час на підтримку.

Все те ж саме, як у випадку з Electron: на все вікно мобільного застосунку відкривається WebView, куди завантажується «сайт», написаний на HTML5, CSS3 і JS. Всі очікували, що мобільні застосунки витіснять веб-сайти на телефонах, а сталося все одно навпаки: сайти стали витісняти нативні застосунки.

Сьогодні Frontend Fullstack Software Engineer — найзатребуваніша ІТ-професія в світі. Тому рішення стати Frontend-розробником правильне і далекоглядне!