Содержание

CSS и JS в состоянии войны: как это остановить | by Workafrolic (±∞) | Web Standards

Перевод «CSS and JS Are at War, Here’s How to Stop It» Андрея Ситника.

ESPN — Saber Combat

Резюмируя: множество людей любят и JS и UX, CSS и т.д. Если мы перестанем раздавать ярлыки типа «JS-разработчик» или «UX-разработчик», то сможем добиться перемирия в текущей войне «JS против CSS».

Некоторые называют её «Великим расколом»: линия фронта реальна; с приверженцами JavaScript с одной стороны и людьми из лагеря UX и CSS, которые пропагандируют подход «без-JS» к интерфейсам, с другой стороны.

Фронтенд-разработчики боятся, что потеряют работу, если не будут следовать за хайпом вокруг JS. И это вполне логично: проводится значительно меньше конференций и митапов по CSS по сравнению с JS, React и иже с ними. Например, в Нью-Йорке существует больше шести JS-митапов и ноль регулярных CSS-митапов.

С другой стороны мы видим, что простые статические сайты слишком перегружены только из-за синдрома упущенной выгоды.

Мы каждый день наблюдаем, как видные деятели фронтенд сообщества обвиняют друг друга. И это, мягко говоря, расстраивает.

Воюющих часто разделяют на коалиции:

  1. JS-JS-JS: разработчики, создающие SPA с клиентской частью на каком-нибудь JavaScript-фреймворке, типа React, Vue.js и Angular. Они являются активными пользователями всяческих инструментов для сборки (Babel, Webpack и т.д.) и JS-библиотек.
  2. UX-разработчики, CSS-разработчики, HTML-JS-CSS-разработчики: разработчики, создающие статичные сайты на ванильном JavaScript и чистом CSS. Доступность и быстродействие — главные темы обсуждений внутри комьюнити.

Но существует ли этот раскол? Может этот дуализм основан только лишь на наших предрассудках?

На мой взгляд, эта предвзятость во многом обусловлена двумя вещами.

Во-первых, существует тренд разделять конференции по CSS и JS. Думаю, что это началось с очень популярного семейства ивентов JSConf и CSSConf и тенденции организации митапов Впиши-Свой-Город-Сюда.

js. Западные платформы публикации контента поддерживают этот разлад: некоторые публикуют в основном статьи о React и JS в то время, как другие сфокусированы на CSS и UX.

Во-вторых, соцсети хороши в поляризации сообщества. Мы помещаем себя в пузырь единомышленников путём подписки на их фиды и ухудшаем ситуацию, делая перепосты только самых агрессивных мнений, приходящих с той стороны.

Современный веб невероятно сложен. Крайне сложно освоить все необходимые для работы веба технологии и никто по-настоящему не может назвать себя на 100% фулстэк-разработчиком. Но из-за искусственно увеличенного разрыва между ветками обсуждения JS и CSS с UX люди с разными, но не обязательно противоположными увлечениями, сталкиваются с чёрно-белым взглядом на мир «JS против CSS». Разработчики на React, которые увлекаются CSS-анимацией и a11y, получают ярлык «фанат JS». И CSS-разработчик, который любит Babel и CSS-in-JS с без рантайма, всё ещё будет носить звание CSS-парня или девчонки.

Как создатель PostCSS, я никогда не мог выбрать сторону даже если очень хотел этого. С одной стороны PostCSS это инструмент для CSS (что отражено в названии). С другой стороны PostCSS это инструмент сборки, написанный на JavaScript, а сборщики не особо в чести в современном сообществе CSS.

И я не одинок, есть ещё куча таких же людей: к примеру, создатель великолепных инструментов для анимации в React или создатель CSS-линтера доступности.

По правде говоря, каждый из нас знает лишь небольшое подмножество технологий. И чьи-то увлечения не обязаны лежать в одной области. Это нормально — любить и React и CSS одновременно. Или использовать сложную систему сборки чтобы быть уверенным, что твой продукт является доступным. Или может погрузиться в распределённые системы, чтобы сделать действительно классный UX в условиях отсутствия интернета.

Даже сами технологии не могут быть чёрно-белыми.

Сторонники «лагеря CSS» часто упоминают БЭМ как решение тех проблем, для которых создавался CSS-in-JS. Но не многие знают, что он, БЭМ, был спроектирован в Яндексе не как чисто CSS-технология. В него также входят JavaScript-фреймворк и изначально строился на ряде принципов, которые были позже использованы в React (например, вложенность маленьких изолированных компонентов).

Конфиги для ESLint, популярные в React-сообществе (по типу конфига AirBnB), содержат множество правил обеспечения доступности.

Я считаю, что война реальна. Я думаю, что мы можем остановить эту войну, перестав разделять разработчиков на категории чёрного и белого.

  1. Если ты любишь технологии с обеих «сторон»: рассказывай об этом! Вытащи это на свет, дай людям возможность начать цивилизованное обсуждение. Тебе нравятся современные JS-фреймворки, но также тебе нравится создавать статические сайты, которые рендерятся на сервере? Скажи об этом миру. Независимые разработчики будут создавать больше фреймворков для статических сайтов, если будут видеть необходимость в них.
  2. Давайте устроим публичный форум для обсуждений между мирами JS и CSS. Если вы организуете JavaScript-митап, то пусть в программе будет один доклад о CSS или UX.
    Пусть будут фронтенд-конференции вместо JS-конференций и CSS-конференций, где люди из разных лагерей смогут рассказать своим оппонентам о своих ежедневных проблемах и предпочитаемых решениях.
  3. Давайте пробовать технологии, пришедшие с другой стороны:
  • Если вы CSS- или UX-разработчик, то начните с линтеров. Stylelint отличный CSS-линтер для начала знакомства.Он будет предупреждать вам об ошибках и позволит делиться лучшими практиками внутри команды. И вы можете запустить его как плагин в вашем любимом текстовом редакторе, поэтому вам даже не нужен какой-либо сборщик.
  • Если вы React-разработчик — попробуйте ванильный JS на следующем лендинге или блоге. Это поможет лучше понять внутренности вашего фреймворка. А ваши юзеры скажут вам спасибо за более быструю загрузку за счёт более лёгкого бандла.

Моя статья о будущем PostCSS, линтеров и CSS-in-JS из Марсианских хроник.

HTML, CSS, JavaScript: где и как учиться веб-разработке

Один из способов зарабатывать деньги удалённо — верстать сайты.  Язык разметки сайтов HTML, язык стилей CSS, язык программирования JavaScript — вот минимальный, хоть и неполный список того, что надо для этого знать.

Чтобы подойти к этому вопросу комплексно, я подготовил подборку из книг, сайтов и курсов для начинающих.

HTML, CSS, JavaScript: где и как учиться веб-разработке

Анна Меликян

Что почитать

HTML и CSS разработка и создание веб-сайтов. Джон Дакетт

JavaScript и jQuery интерактивная веб-разработка. Джон Дакетт

Это не полные справочники для создания сайтов, но они, на мой взгляд, смогут максимально просто и доходчиво показать вам основы верстки. После вы можно приступать к более глубокому изучению этих дисциплин.

freeCodeCamp

Здесь описаны, как базовые концепции так и фреймворки JS. Сайт бесплатный, но только на английском, так что знание языка обязательно.  

JavaScript.ru

Здесь собрана подробная  информация об JS, а также представлены примеры, благодаря которым учиться можно намного быстрее.

htmlbook.ru

Если у вы не знаете или не помните определённые теги, которые вам нужно использовать при верстке, вы всегда можете использовать данный сайт. Здесь есть все теги и их подробное описание, так что вы точно не запутаетесь. 

Где поучиться

Курсов, где вас могут научить верстке также немало, но я решил подобрать во-первых бесплатные, во-вторых максимально хорошие курсы. Единственное, если вам понадобится сертификат о прохождении курса, то придётся заплатить. 

Coursera

HTML, CSS, and JavaScript for Web Developers

Курс для начинающих, которые знают английский язык и хотят изучить комплексно HTML, JavaScript и CSS. Преподаватели — специалисты из университета Johns Hopkins University в США.

Web Design for Everybody: Basic of Web Development & Coding

Базовый курс от University of Michigan. Подойдёт даже тем, кто раньше никогда не имел дела с разработкой. На английском языке. 

Stepik

Веб-разработка для начинающих: HTML и CSS

Курс на русском языке от РЭУ им. Плеханова. Он также создан для людей, которые никогда раньше не программировали. 

JavaScript for Beginners

Вводный курс на английском языке. Для новичков!

Introduction to JavaScript and React

Тут научат JavaScript и расскажут о библиотеке React. 

Фото на обложке: Unsplash

HTML, CSS, JavaScript и PHP: что это такое и для чего?

Каждая из этих технологий имеет различное предназначение, цели и функции. Но бо́льшую ценность они представляют, когда работают вместе, а не по отдельности. Давайте теперь отдельно разберем каждую из этих технологий.



HTML (Hypertext Markup Language) — это язык гипертекстовой разметки. Эта разметка создается с помощью тегов (то есть с помощью «меток») — наборов символов, входящие в угловатые скобки. Например, основной тег страницы html пишется следующим образом — <html>. Любая страница в интернете состоит из множества тегов. Конечно, это не то, что мы привыкли видеть, когда заходим в интернет. Каждый из этих тегов играет определенную важную роль.

Чтобы упростить задачу понимания этой технологии, давайте представим себе обычный дом. Увидев дом, мы видим его экстерьер, то есть то, из чего сделан дом. Теги на странице можно рассматривать как небольшие кирпичики, с помощью которых построен дом. Важно, чтобы эти кирпичи аккуратно и красиво были разложены, иначе дом будет криво смотреться, а может и вообще он будет непригоден для использования. Также и на страницах, при составлении структуры страницы важно уделить особое внимание тегам.

Рассмотрим общую структуру любой страницы в интернете:

Любая веб страница начинается с <!DOCTYPE html>. Этот тег дает браузеру понять, что далее представлен код html последней [пятой] версии.

Затем пишется парный тег <html></html>. Это основной тег страницы, который обязательно должен присутствовать и содержать в себе других 2 основных тега, это head и body.

Внутри парного тега

<head></head> необходимо написать заголовок страницы (тег title), который отображается во вкладке браузера. Так же в контейнере <head></head> обычно находятся различные мета-теги для поисковых систем, подключение различных файлов к странице (например, стили) и т.д. В этой секции находится информация, которая важна для страницы, но не отображается на ней.

Внутри тега <body></body> находится всё, что должно быть на странице. Это любые из существующих тегов, текст, картинки, элементы работы с данными и так далее. Всё, что вы видите на страницах в интернете, всегда находится в теге body.

В приведенном выше примере в теге body находятся 2 элемента — тег h2 и тег p. Тег h2 обозначает заголовок на странице, а тег p — абзац. У каждого html тега есть свое предназначение. К тому же все элементы имеют стандартное форматирование браузера, это значит, что размер текста в заголовке по умолчанию будет больше, чем в абзаце. Из таких тегов и составляется страница, которую вы видите в браузере. Однако без графического оформления эти элементы совсем не презентабельные, именно поэтому нужен CSS.

CSS — Cascading Style Sheets — это каскадные таблицы стилей. С помощью разметки мы создали структуру и наполнение документа, а теперь будем внешне оформлять. Вот для этого и служат каскадные таблицы стилей. Чтобы здесь тоже упросить задачу с понятием CSS, вернемся к нашему примеру с домом. После постройки дома он выглядит совсем не презентабельно, поэтому, чтобы придать красивый вид, его раскрашивают. Подъезд покрашен в один цвет, балконы в другой и так далее. Это и есть графическое оформление. Так же и со страницей: без стилей элементы имеют только стандартное оформление браузера. Но с помощью стилей вы меняете на странице размер текста, его цвет, шрифт и так далее.

Вернемся к нашему примеру кода страницы html. Для тега h2 можно задать красный цвет текста следующим образом:

Как видите, ничего сложного в такой записи нет. Сначала мы указываем к чему нужно применить блок стилей. Далее в фигурных скобках мы описываем стили для этого элемента h2. В этом блоке мы можем задать любые из имеющихся стилей и все они применятся к элементу h2.

Теперь, разобравшись со стилем текста, давайте постараемся это все оживить. Тут нам придется прибегнуть к помощи JavaScript.
JavaScript — это язык программирования, сокращенно «JS». Изначально его создали для того, чтобы «оживить» веб-приложения и веб-сайты, то есть, чтобы элементы интерфейса (всплывающие окна, анимации, кнопки и т.д.) реагировали на действия пользователей. Однако сейчас этот язык программирования применяют не только для оживления страниц, но и на стороне сервера, для создания мобильных приложений, веб-сервисов и так далее.

Если вернуться к примеру с домом — то JavaScript это лифт, который доставляет пользователей на нужный этаж. Пользователь заходит в дом, ему нужно попасть на конкретный этаж, он нажимает на кнопку этажа и далее лифт автоматически доставляет пользователя на нужный этаж. Так же и на странице, пользователь нажимает на кнопку, а JavaScript выполняет нужное действие. Конечно, человек всегда может подняться по лестнице, так же как и сайт может работать без JavaScript, но, согласитесь, именно лифт делает дом лучше, так же как и JavaScript делает лучше веб-страницу.

Ну и последняя технология в этой связке — PHP. PHP (от англ. Hypertext Preprocessor) — это серверный язык программирования. Как мы уже отметили, если JavaScript работает на стороне клиента (браузера пользователя), то PHP — на стороне сервера (компьютер, где располагается сайт). PHP не зависит от скорости компьютера пользователя или его браузера, он полностью работает на сервере. PHP позволяет соединить все страницы в единое целое и предоставить сайту функции, без которых эти страницы не будут работать как единое целое: авторизоваться на сайте, подать заявку на бронирование, добавить товары в корзину и сделать заказ. PHP работает с базой данных, которая хранит всю динамическую (изменяющуюся) информацию на сайте.

Если вернуться к нашему примеру с домом, то PHP можно представить как водопроводную систему, электричество и т.д. То есть это то, что работает «под капотом» дома. Чтобы лифт работал, в доме нужно электричество. И это более важная составляющая дома, нежели лифт. Когда жилец дома тратит электричество, то все эти показания записываются в «базу данных» дома. Так же и с сайтом, когда пользователь нажимает на кнопку отправки заявки на бронирование, JavaScript отправляет данные на сервер, где PHP обрабатывает эту информацию и записывает в базу данных.

Умея работать с этими технологиями в связке, можно создавать любые сайты, от простых лендингов до огромных интернет-магазинов либо же сложных веб-сервисов с большим количеством данных. Спрос на такие технологии не падает, а это значит, что в ближайшие годы вы точно сможете хорошо зарабатывать, используя эти технологии.

Если вы еще только планируете изучение этих технологий, то рекомендуем рассмотреть обучение на нашем курсе «Веб-верстальщик», в котором подробно изучаются такие технологии, как HTML, CSS и JavaScript. Этих трех технологий вполне достаточно, чтобы создавать сайты. А при необходимости можно заняться освоением языка PHP, чтобы делать более мощные и большие сайты.

Если статья была для Вас полезной — можете отблагодарить нас своим лайком, это важно для нашей команды! Мы хотим понимать, что действительно интересно для Вас, и работать над контентом. Спасибо!

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Интерфейсы сайтов и веб-приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML-кодом, визуализация и оформление — содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.

Кроме HTML, CSS и JS в современной фронтэнд-разработке никаких других языков не используется. Специалист, который занимается разработкой на этих технологиях называется фронтендерами (frontend-developer), а разработчики, использующие только HTML и CSS (возможно, с минимумом готовых JS-скриптов), — просто верстальщиками.

HTML и CSS

HTML и CSS — это основа любого сайта. От их корректности зависит качество отображения сайта в различных браузерах (Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera) и на различных устройствах (ПК, планшеты, смартфоны). Валидность и семантичность HTML кода также определяет качество сайта с точки зрения поисковых систем.

Говоря про HTML и CSS нельзя не упомянуть фреймворки, которые упрощают верстку — Twitter Bootstrap, Bulma, MaterialUI, Zubr Foundation, html5boilerplate и blueprint. Эти фреймворки содержат в себе сетку для макетов, хорошую типографику, готовые контролы (кнопки, элементы формы) и многое другое.

Для CSS существует несколько препроцессоров, расширяющих возможности языка, например, LESS и SASS. Благодаря им упрощается разработка и сопровождение больших проектов, так как возможности использования функций, переменных и примесей существенно снижают повторения в коде и позволяю повторно использовать многие участки кода.

JavaScript

Клиентский язык программирования JavaScript используется при разработке интерфейсов сайтов, делая их более отзывчивыми и динамичными. На JavaScript реализуется большая часть тех красивых эффектов, которые мы видим на современных сайтах (фотогалереи, слайдшоу, интерфейсы на вкладках и т.д.). Еще одним из популярных типов использования JS является AJAX — технология, позволяющая без перезагрузки страницы отправлять на сервер команды и/или получать оттуда данные и встраивать их в страницу.

Говоря про JavaScript нельзя не упомянуть популярную библиотеку написанную на нем — это jQuery. Её использование в проектах позволяет создавать интерактивные сценарии поведения интерфейса достаточно быстро и просто. Также на базе jQuery написано много готовых компонентов, позволяющих встроить нужный функционал путём копирования и вставки нескольких строк кода. Но при этом сложные интерфейсы на jQuery обычно очень тяжело сопровождать.

JS-разработка сложных интерфейсов обычно строится вокруг более продвинутых библиотек и фреймворков — React, Vue, Angular, MobX и Redux. Они позволяют создавать очень интерактивные интерфейсы так, что кодовая база остаётся сопровождаемой.

Браузеры поддерживают работу только с JavaScript, но существуют также языки, позволяющие писать код на них, а потом преобразовывать написанное в JS. Из них стоит отметить наиболее популярные — TypeScript, Dart и Kotlin.

Adobe Flash

Позволяет создавать эффектную анимацию и сложные интерактивные сервисы, но не всегда у пользователей установлен нужный плагин, на части устройств (iOS, например) Flash не поддерживается вовсе, поисковые системы также не понимают Flash. Именно поэтому на сегодняшний день Flash практически полностью вытеснен более современными решениями на JavaScript и HTML5.

HTML, CSS, JavaScript и PHP: что это такое и для чего?

Это популярные технологии для создания сайтов. В основе 90% всех сайтов находится данный набор технологий.

HTML (Hypertext Markup Language) — язык гипертекстовой разметки. Разметки образуются посредством тегов («меток») — это набор символов, расположенных в скобках. Страница состоит из тегов, выполняющих соответствующие задачи. На самой странице мы не увидим эти символы — они преобразуются.

Это своего рода кирпичи, которые образую в итоге целый дом. От того, правильно разложили «кирпичики» или нет , зависит форма страницы.

Вот общая структура обычной страницы:

Веб страница должна начинаться с тега, который указывает браузеру на то, что дальше идёт код html последней версии.

После указывают парный тег — основной тег: head и body.

Внутри пишут заголовок страницы (title), отображаемый во вкладке браузера. Здесь же размещают мета-теги необходимые для поисковых систем, и которые служат для закрепления файлов к странице.

Внутри размещают всё, что будут видеть пользователи на странице. Например, изображения, текст и детали.

На изображении внутри body есть два знака. Тег h2 показывает заголовок, а p обозначает абзац.

Ещё одна составляющая страницы — CSS. Без графического оформления, выстроенная структура и наполнение страницы не презентабельны. Тут на помощь приходит Cascading Style Sheets —каскадные таблицы стилей. Стили определяют размер текста, шрифт, цвет и т.д. На картинке, наглядно, можно увидеть, как работать с CSS.
Чтобы оформить текст в красный цвет, задают следующую задачу:

Определяем куда применить блок и в скобках (фигурных) обозначаем стили для h2. Все стили, заданные в этом блоке, применяются к h2. Но на этом работа над сайтом не заканчивается. Всё это нужно «оживить», привести в рабочее состояние.

Эту проблему решает JavaScript (JS) – язык программирования.
Первоначальной целью JS было «оживление» приложений и сайтов: чтобы всплывающие окна, кнопки и т.п. отвечали на действия пользователей. Сейчас область применения этого языка расширилась.
Веб-страница может работать и без JavaScript, но пользователям будет сложнее ориентироваться и займёт много времени. Действия, которые элементы интерфейса выполняют в один клик, пользователям придётся совершать довольно долго.

Далее мы переходим к PHP — серверный язык программирования. Он работает с базой данных сайта. Разница между JavaScript и PHP, в том, что первое работает на пользователя, а второе на сервер, т.е. на компьютер с сайтом и является более важной.

Язык работает на сервере, поэтому он не зависит от скорости сторонних объектов. При помощи PHP все страницы соединяются в одно целое, включая весь функционал: оформление заказа, авторизация, добавление в корзину.

Эти четыре технологии позволяют разрабатывать любые сайты любой сложности.
Умея работать с ними, можно создавать любые сайты, от простых лендингов до огромных интернет-магазинов либо же сложных веб-сервисов с большим количеством данных.
Количество сайтов увеличивается, и эта тенденция вряд ли скоро изменится. Так что спрос на веб-верстальщиков будет соразмерно расти.
Если  хотите пополнить команду веб-верстальщиков, предлагаем пройти обучение в «Лаборатории программирования», где вы подробно изучите технологии:
HTML
CSS
JavaScript
PHP

Новый язык для веб-разработки объединил возможности HTML, CSS и JavaScript

Интернет Веб-сервисы

, Текст: Сергей Попсулин

Американцы предложили новый язык программирования для разработки веб-сайтов. Он объединяет в себе популярные технологии, такие как HTML, CSS и JavaScript, и освобождает разработчика от необходимости работать с этими языками по-отдельности.

Создание относительно сложной веб-страницы требует понимания целого ряда языков, включая HTML, CSS и JavaScript. Исследователи из Массачусетского технологического института утверждают, что интегрировали все эти технологии в новый единый язык программирования, позволяющий упростить и ускорить разработку веб-сайтов и сделать их надежнее и безопаснее.

Язык под названием Ur/Web позволит разработчикам писать веб-страницы как самостоятельные замкнутые программы. А так как он включает большинство самых популярных из современных веб-технологий, разработчик будет освобожден от работы с каждым из языков по-отдельности.

«Я думаю, что этот язык может найти очень широкое применение, так как он способен сократить издержки на веб-разработку во многих случаях», — заявил создатель Ur/Web Адам Члипала (Adam Chlipala), помощник профессора из Массачусетского технологического института. Он добавил, что язык обладает большей степенью универсальности по сравнению с современными веб-стандартами.

Сейчас разработчику нужно знать язык HTML, который позволяет сформировать макет страницы, язык CSS, который определяет цвета, шрифты и другие свойства элементов, JavaScript, позволяющий внедрить расширенные функции и интерактивность, язык PHP, на котором написаны популярные системы управления контентом, а также SQL для работы с базами данных, которые есть на большинстве сайтов, и т. д.

Ur/Web включает в себя функции и возможности всех отдельных языков, на которых пишутся веб-сайты, и компилирует их в исполняемый машинный код.

Так как код Ur/Web скомпилирован заранее, производительность получается гораздо более высокой по сравнению с традиционными методами разработки веб-сайтов, утверждает Члипала. В одном из тестов Ur/Web показал в два раза более высокую скорость по сравнению с PHP.


К недостаткам языка относится необходимость изучения функционального программирования

«В Ur/Web все базируется на транзакциях, когда каждый клиентский запрос обрабатывается поочередно своего рода центральной функцией, — объяснил автор. — Язык при этом оптимизирован с той целью, чтобы он мог обрабатывать одновременно множество параллельных запросов на физических серверах».

Помимо облегчения для части разработчиков, новый язык привносит некоторые новые механизмы, помогающие повысить надежность и безопасность сайтов. Так, он позволяет исключить возможность взаимодействия между различными элементами на одной странице — например, кодом рекламного объявления и виджетом календаря.

Кроме того, как и традиционные языки программирования, такие как C, Pascal и Java, и в отличие от веб-языков, таких как JavaScript, Ur/Web имеет жесткую типизацию. То есть все переменные связываются с определенным типом данных в самом начале, и затем этот тип уже нельзя изменить. Это затрудняет взлом сайта посредством отправки специальным образом сформированных команд с помощью форм на веб-страницах. Ur/Web также поддерживает задание областей видимости переменных, то есть позволяет ограничить те места, из которых переменная в программе может быть вызвана.

Но есть у языка и недостаток. Он требует постижения функционального программирования. Эта задача будет сложной для тех, кто привык иметь дело с процедурными и объектно-ориентированными языками (С, Pascal). Члипала сравнил Ur/Web с функциональным языком программирования Haskell. Многие программисты считают его чем-то потусторонним, но небольшая группа разработчиков любит и почитает этот язык за его вычислительные возможности.



Почему JavaScript поглощает HTML

Веб-разработка постоянно меняется. Одна тенденция, в частности, стала очень популярной в последнее время, и она в корне противоречит общепринятому мнению о том, как должна быть создана веб-страница. Некоторых это волнует, а других расстраивает, и причины того и другого трудно объяснить.

Веб-страница традиционно состоит из трех отдельных частей с отдельными обязанностями: HTML-код определяет структуру и значение содержимого на странице, CSS-код определяет его внешний вид и JavaScript-код определяет его поведение. В командах со специальными дизайнерами, разработчиками HTML / CSS и разработчиками JavaScript такое разделение задач хорошо согласуется с рабочими ролями: дизайнеры определяют визуальные элементы и взаимодействие с пользователем на странице, разработчики HTML и CSS воспроизводят эти визуальные элементы в веб-браузере, а разработчики JavaScript. добавьте взаимодействие с пользователем, чтобы связать все вместе и «заставить работать». Люди могут работать над одним предметом, не вмешиваясь во все три.

В последние годы разработчики JavaScript осознали, что, определяя структуру страницы в JavaScript, а не в HTML (с использованием таких фреймворков, как React), они могут упростить разработку и сопровождение кода взаимодействия с пользователем, который в противном случае гораздо сложнее создать.Конечно, когда вы говорите кому-то, что HTML, который они написали, нужно измельчить и смешать с JavaScript, о котором они ничего не знают, они могут (понятно) разочароваться и начать спрашивать, какого черта мы получаем из этого .

Как разработчик JavaScript в кросс-функциональной команде, я иногда получаю этот вопрос, и у меня часто возникают проблемы с ответом. Все материалы, которые я нашел по этой теме, написаны для аудитории, которая уже знакома с JavaScript, что не очень полезно для тех, кто сосредоточен на HTML и CSS.Но этот шаблон HTML-in-JS (или что-то еще, обеспечивающее те же преимущества), вероятно, будет существовать какое-то время, поэтому я думаю, что это важная вещь, которую должны понимать все, кто занимается веб-разработкой.

Эта статья будет включать примеры кода для заинтересованных, но моя цель — объяснить эту концепцию таким образом, чтобы их можно было понять и без них.

Предпосылки: HTML, CSS и JavaScript

Чтобы максимально расширить аудиторию этой статьи, я хочу вкратце рассказать о типах кода, участвующих в создании веб-страницы, и их традиционных ролях.Если у вас есть опыт работы с ними, вы можете пропустить.

HTML предназначен для структурного и семантического значения
Код

HTML (язык разметки гипертекста) определяет структуру и значение содержимого на странице. Например, HTML-код этой статьи содержит текст, который вы сейчас читаете, тот факт, что он находится в абзаце, и тот факт, что он идет после заголовка и перед CodePen.

Допустим, мы хотим создать простое приложение со списком покупок. Мы могли бы начать с такого HTML-кода:

Мы можем сохранить этот код в файл, открыть его в веб-браузере, и браузер отобразит результат рендеринга.Как видите, HTML-код в этом примере представляет собой раздел страницы, содержащий заголовок «Список покупок (2 элемента)», поле ввода текста, кнопку «Добавить элемент» и список с двумя элементами. читая «Яйца» и «Сливочное масло». На традиционном веб-сайте пользователь переходит по адресу в своем веб-браузере, затем браузер запрашивает этот HTML-код с сервера, загружает его и отображает. Если в списке уже есть элементы, сервер может доставить HTML с уже имеющимися элементами, как в этом примере.

Попробуйте ввести что-нибудь в поле ввода и нажмите кнопку «Добавить элемент». Вы заметите, что ничего не происходит. Кнопка не связана с каким-либо кодом, который может изменять HTML, и HTML не может изменяться сам по себе. Мы скоро вернемся к этому.

CSS для внешнего вида
Код

CSS (каскадные таблицы стилей) определяет внешний вид страницы. Например, CSS этой статьи содержит шрифт, интервал и цвет текста, который вы читаете.

Вы могли заметить, что наш пример со списком покупок выглядит очень просто.В HTML нет способа указать такие вещи, как интервал, размер шрифта и цвета. Именно здесь на помощь приходит CSS (каскадные таблицы стилей). На той же странице, что и HTML-код выше, мы могли бы добавить код CSS, чтобы немного изменить стиль:

Как видите, этот CSS изменил размер и толщину шрифта и дал разделу приятный цвет фона (дизайнеры, пожалуйста, не @ me; я знаю, что это все еще некрасиво). Разработчик может написать такие правила стиля, и они будут последовательно применяться к любой структуре HTML: если мы добавим на эту страницу больше элементов

,

Когда веб-браузер читает этот HTML-код, он определит для вас эти обязательных шагов и выполнит их:

  1. Создайте элемент раздела
  2. Создайте элемент заголовка уровня 1
  3. Установите для внутреннего текста элемента заголовка значение «Привет»
  4. Поместите элемент заголовка в элемент раздела
  5. Создайте элемент абзаца
  6. Установите внутренний текст элемента абзаца в «Меня зовут Майк»
  7. Поместите элемент абзаца в элемент раздела
  8. Поместите элемент раздела в документ
  9. Отобразите документ на экране

Как веб-разработчик, подробности как браузер делает эти вещи, не имеет значения; все, что имеет значение, это то, что он их делает.Это прекрасный пример разницы между этими двумя видами программирования. Короче говоря, HTML — это декларативная абстракция , обернутая вокруг обязательного механизма отображения веб-браузера. Он заботится о «как», поэтому вам нужно беспокоиться только о «что». Вы можете получать удовольствие от жизни, создавая декларативный HTML, потому что хорошие люди из Mozilla, Google или Apple написали для вас обязательный код при создании вашего веб-браузера.

JavaScript — императивный язык

Мы уже рассмотрели простой пример императивного JavaScript в приведенном выше примере списка покупок, и я упомянул, как сложность функций приложения влияет на усилия, необходимые для их реализации, и на вероятность ошибок в этой реализации.Теперь давайте посмотрим на чуть более сложную функцию и посмотрим, как ее можно упростить с помощью декларативного подхода.

Представьте себе веб-страницу, содержащую следующее:

  • Список помеченных флажков, каждая строка которых меняет цвет при выборе
  • Текст внизу, как «1 из 4 выбран», который должен обновляться при изменении флажков
  • Кнопка «Выбрать все», которая должен быть отключен, если все флажки уже установлены.
  • Кнопка «Выбрать нет», которая должна быть отключена, если флажки не выбраны.

Вот реализация этого в обычном HTML, CSS и императивном JavaScript:

Здесь не так много кода CSS, потому что я использую замечательную систему дизайна PatternFly, которая предоставляет большую часть CSS для моего примера.Я импортировал их файл CSS в настройки CodePen.

Все мелочи

Чтобы реализовать эту функцию с помощью императивного JavaScript, нам нужно дать браузеру несколько подробных инструкций. Это англоязычный эквивалент кода в моем примере выше:

  • В нашем HTML мы объявляем начальную структуру страницы:
    • Есть четыре элемента строки, каждый из которых содержит флажок. Третье поле отмечено.
    • Существует краткий текст, который гласит: «Выбрано 1 из 4.»
    • Есть кнопка« Выбрать все », которая активна.
    • Есть кнопка «Нет выбора», которая неактивна.
  • В нашем JavaScript мы пишем инструкции о том, что менять, когда происходит каждое из этих событий:
    • Когда флажок меняется с не отмеченного на установленный:
      • Найдите элемент строки, содержащий флажок, и добавьте . Выбранный CSS класс к нему.
      • Найдите все элементы флажка в списке и подсчитайте, сколько из них отмечено, а сколько не отмечено.
      • Найдите текстовый элемент сводки и обновите его, указав отмеченное число и общее число.
      • Найдите элемент кнопки «Нет выбора» и включите его, если он был отключен.
      • Если сейчас установлены все флажки, найдите элемент кнопки «Выбрать все» и отключите его.
    • Когда флажок меняется с установленного на не отмеченный:
      • Найдите элемент строки, содержащий флажок, и удалите из него класс .selected .
      • Найдите все элементы флажка в списке и подсчитайте, сколько из них отмечено, а сколько не отмечено.
      • Найдите текстовый элемент сводки и обновите его, указав отмеченное число и общее число.
      • Найдите элемент кнопки «Выбрать все» и включите его, если он был отключен.
      • Если все флажки теперь сняты, найдите элемент кнопки «Нет выбора» и отключите его.
    • При нажатии кнопки «Выбрать все»:
      • Найдите все элементы флажка в списке и отметьте их все.
      • Найдите все элементы строки в списке и добавьте .выделил им класс.
      • Найдите текстовый элемент сводки и обновите его.
      • Найдите кнопку «Выбрать все» и отключите ее.
      • Найдите кнопку «Нет выбора» и включите ее.
    • При нажатии кнопки «Нет выбора»:
      • Найдите все элементы флажка в списке и снимите их со всех.
      • Найдите все элементы строки в списке и удалите из них класс .selected .
      • Найдите текстовый элемент сводки и обновите его.
      • Найдите кнопку «Выбрать все» и включите ее.
      • Найдите кнопку «Нет выбора» и отключите ее.

Вау. Это много, правда? Что ж, нам лучше не забыть писать код для каждой из этих вещей. Если мы забудем или испустим любую из этих инструкций, мы получим ошибку , в которой итоги не соответствуют флажкам, или включена кнопка, которая ничего не делает, когда вы нажимаете на нее, или строка заканчивается неправильного цвета или чего-то еще, о чем мы не думали и о чем не узнаем, пока пользователь не пожалуется.

Большая проблема здесь в том, что не существует единого источника для состояния нашего приложения, которое в данном случае означает «какие флажки установлены?» Флажки, конечно, знают, отмечены они или нет, но стили строк также должны знать, сводный текст должен знать, и каждая кнопка должна знать. Пять копий этой информации хранятся отдельно по всему HTML, и когда она изменяется в любом из этих мест, разработчик JavaScript должен уловить это и написать императивный код, чтобы синхронизировать остальные.

Это всего лишь простой пример одного небольшого компонента страницы. Если это звучит как головная боль, представьте, насколько сложным и хрупким становится приложение, когда вам нужно все это написать таким образом. Для многих сложных современных веб-приложений это не масштабируемое решение.

Двигаясь к единому источнику истины

Инструменты

, такие как React, позволяют нам декларативно использовать JavaScript. Подобно тому, как HTML — это декларативная абстракция, обернутая вокруг инструкций отображения веб-браузера, React — это декларативная абстракция, обернутая вокруг JavaScript.

Помните, как HTML позволяет нам сосредоточиться на структуре страницы, а не на деталях того, как браузер отображает эту структуру? Что ж, когда мы используем React, мы можем снова сосредоточиться на структуре, определяя ее на основе данных, хранящихся в одном месте. Когда этот источник истины изменится, React автоматически обновит для нас структуру страницы. Он позаботится о необходимых шагах за кулисами, как веб-браузер для HTML. (Хотя здесь в качестве примера используется React, эта концепция не уникальна для React и используется другими фреймворками, такими как Vue.)

Вернемся к списку флажков из приведенного выше примера. В данном случае нас интересует простая истина: какие флажки установлены? Другие детали на странице (например, что говорится в сводке, цвет строк, включены ли кнопки) являются эффектами, вытекающими из той же истины. Итак, зачем им иметь собственную копию этой информации? Они должны просто использовать единственный источник правды для справки, и все на странице должно «просто знать», какие флажки отмечены, и вести себя соответствующим образом. Вы можете сказать, что элементы строки, сводный текст и кнопки должны иметь возможность автоматически реагировать на то, что флажок установлен или снят. (Видите, что я там делал?)

Скажите, чего вы хотите (чего вы действительно, действительно хотите)

Чтобы реализовать эту страницу с помощью React, мы можем заменить список несколькими простыми декларациями фактов:

  • Существует список истинных / ложных значений, называемый checkboxValues ​​, который представляет, какие поля отмечены.
    • Пример: checkboxValues ​​= [false, false, true, false]
    • Этот список представляет истину , что у нас есть четыре флажка, а третий отмечен.
  • Для каждого значения в checkboxValues ​​ есть элемент строки, который:
    • имеет класс CSS с именем .selected , если значение истинно, и
    • содержит флажок, который проверяется, если значение равно истинный.
  • Существует элемент сводного текста, который содержит текст « {x} из {y} selected», где {x} — количество истинных значений в флажке Значения и {y} — общее количество значений в checkboxValues ​​.
  • Есть кнопка «Выбрать все», которая активируется, если есть какие-либо ложные значения в checkboxValues ​​.
  • Есть кнопка «Нет выбора», которая активна, если есть какие-либо истинные значения в checkboxValues ​​.
  • При щелчке по флажку его соответствующее значение изменяется на checkboxValues ​​.
  • При нажатии кнопки «Выбрать все» для всех значений в checkboxValues ​​ устанавливается значение true.
  • При нажатии кнопки «Нет выбора» для всех значений в checkboxValues ​​ устанавливается значение false.

Вы заметите, что последние три пункта по-прежнему являются обязательными инструкциями («Когда это произойдет, сделайте то»), но это единственный императивный код, который нам нужно написать. Это три строки кода, и все они обновляют единый источник истины. Остальные эти маркеры представляют собой объявления («есть…»), которые теперь встроены прямо в определение структуры страницы. Для этого мы пишем наши элементы в специальном синтаксисе JavaScript, предоставляемом React, под названием JSX, который напоминает HTML, но может содержать логику JavaScript.Это дает нам возможность смешивать логику типа «если» и «для каждого» со структурой HTML, поэтому структура может быть разной в зависимости от содержимого checkboxValues ​​ в любой момент времени.

Вот тот же пример списка покупок, что и выше, на этот раз реализованный с помощью React:

JSX определенно странный. Когда я впервые столкнулся с этим, это было просто неправильно. Моя первая реакция была: «Что это, черт возьми? HTML не место в JavaScript! » Я был не один. Тем не менее, это не HTML, а скорее JavaScript, выглядящий как HTML.Это тоже довольно мощный.

Помните тот список из 20 обязательных инструкций выше? Теперь их трое. За плату за определение нашего HTML внутри нашего JavaScript остальные из них предоставляются бесплатно. React просто делает их за нас всякий раз, когда checkboxValues ​​ изменяется.

С этим кодом теперь невозможно , чтобы сводка не соответствовала флажкам, или чтобы цвет строки был неправильным, или чтобы кнопка была активирована, когда она должна быть отключена.Существует целая категория ошибок, которые сейчас невозможно разместить в нашем приложении: источников истины не синхронизированы . Все вытекает из единого источника истины, и мы, разработчики, можем писать меньше кода и лучше спать по ночам. Ну, разработчики JavaScript могут, по крайней мере…

Это компромисс

По мере того, как веб-приложения становятся все более сложными, поддержание классического разделения задач между HTML и JavaScript требует все более болезненных затрат.Изначально HTML был разработан для статических документов, и чтобы добавить к этим документам более сложные интерактивные функции, императивный JavaScript должен отслеживать больше вещей и становиться более запутанным и хрупким.

Положительные стороны: предсказуемость, возможность повторного использования и композиция

Способность использовать единственный источник истины — самое важное преимущество этого паттерна, но компромисс дает нам и другие преимущества. Определение элементов нашей страницы как кода JavaScript означает, что мы можем превращать его фрагменты в компоненты многократного использования, не позволяя нам копировать и вставлять один и тот же HTML-код в нескольких местах.Если нам нужно изменить компонент, мы можем внести это изменение в одном месте, и оно будет обновляться везде в нашем приложении (или во многих приложениях, если мы публикуем повторно используемые компоненты для других команд).

Мы можем взять эти простые компоненты и составить их вместе, как кубики LEGO, создавая более сложные и полезные компоненты, не делая их слишком запутанными для работы. А если мы используем компоненты, созданные другими, мы можем легко обновлять их, когда они выпускают улучшения или исправляют ошибки, без необходимости переписывать наш код.

Обратная сторона: это JavaScript полностью вниз.

За все эти преимущества приходится платить. Есть веские причины, по которым люди ценят разделение HTML и JavaScript, и чтобы получить эти другие преимущества, нам нужно объединить их в одно. Как я уже упоминал ранее, отказ от простых файлов HTML усложняет рабочий процесс для тех, кому раньше не нужно было беспокоиться о JavaScript. Это может означать, что кто-то, кто раньше мог вносить изменения в приложение самостоятельно, теперь должен изучить дополнительные сложные навыки, чтобы поддерживать эту автономию.

Возможны и недостатки технического характера. Например, некоторые инструменты, такие как линтеры и парсеры, ожидают обычного HTML, а с некоторыми сторонними обязательными плагинами JavaScript может стать труднее работать. Кроме того, JavaScript — не лучший язык дизайна; это именно то, что у нас есть в наших веб-браузерах. Новые инструменты и функции делают его лучше, но в нем все еще есть некоторые подводные камни, о которых вам нужно знать, прежде чем вы сможете работать с ним продуктивно.

Другая потенциальная проблема заключается в том, что когда семантическая структура страницы разбивается на абстрактные компоненты, разработчикам может быть легко перестать думать о том, какие фактические элементы HTML генерируются в конце.Определенные HTML-теги, такие как

и