История Frontendа

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

В начале 1990-х годов мир увидел рождение веб-разработки благодаря Тиму Бернерсу-Ли. Он вообще был первым Fronted-разработчиком: сам придумал 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. Вот его бы использовать… Поэтому программисты придумали лайфхак: у вашего приложения открывается главное окно, в это окно встраивается браузер (компонент VebView), а в этот браузер грузится код на 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: на все окно мобильного приложения открывается VebView, куда грузится «сайт», написанный на HTML5, CSS3 и JS. Все ожидали, что мобильные приложения вытеснят веб-сайты на телефонах, а произошло все ровно наоборот: сайты стали вытеснять нативные приложения.

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