Бен Хардинг – инженер по интерфейсу

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

Мы рассмотрим этот обзор разработки интерфейса за 2016 год.

Обзор разработки интерфейса: важные обновления в 2016 году

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

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

JavaScript остается самым популярным языком в веб-разработке, а PHP немного отстает от Node и Angular. ИСТОЧНИК: Stackoverflow

Что касается разработки внешнего интерфейса, HTML и CSS претерпели улучшения в основных областях, таких как размер изображения и макет.

Ради нашего ежегодного обзора фронтенд-разработки давайте взглянем на основные обновления для JavaScript, CSS и HTML:

HTML/CSS

1. HTML 5.1

HTML 5 был выпущен около двух лет назад и за это время претерпел значительные улучшения. Благодаря списку впечатляющих новых функций HTML5 дал нам средства для удаления неприятных плагинов браузера с наших веб-сайтов. С тех пор HTML 5.1 находится в разработке и вносит несколько улучшений в текущие реализации.

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

2. Элемент изображения

Изображения являются одним из наиболее важных элементов контента, используемых в Интернете, поэтому «элемент изображения» попал в этот обзор разработки интерфейса. Графика — это огромная тема, поскольку она легко может быть большого размера, что снижает производительность, и какое-то время не было хороших вариантов отображения мобильных и настольных изображений. Вот почему наличие тега picture в спецификации HTML 5.1 является отличным дополнением.

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

3. CSS Flexbox

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

И мы можем начать использовать его очень скоро! Браузерная поддержка Flexbox довольно хороша: caniuse сообщает, что 97% браузеров поддерживают по крайней мере версию с префиксом и 85% — без префикса.

Если вы один из счастливчиков, которым не нужно поддерживать клиентов, использующих IE 9, вы можете приступить к работе уже сегодня!

4. CSS-сетки

CSS-сетки, более экспериментальная функция CSS, выглядят еще одним отличным инструментом для макетов.

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

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

JavaScript

5. ECMAScript 6 начинает использоваться

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

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

6. Область действия переменных

Обычная ошибка, которую я вижу у разработчиков, плохо знакомых с программированием на JavaScript, обычно связана с областью видимости переменных. Я был там раньше — пытался повторно использовать переменную, которую я объявил в цикле внутри функции, потому что я думал, что это сэкономит мне время. Когда я потратил больше времени на его отладку, я понял, что должен был поступить иначе.

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

Let является более интересной версией и объявляет переменную в области блока, что означает, что она будет иметь значение только внутри блока и подблока, в котором она была определена.

пусть х = 1;
если (истина) {
пусть х = 2; // другая переменная
console.log(x); // 2
}
console.log(x); // 1

7. Модули JavaScript

Создание модульного JavaScript важно при создании больших приложений.

Отсутствие возможности разделить ваше приложение на многократно используемые фрагменты означает, что вам придется создавать больше кода, а значит, и поддерживать его, а также становится проблемой пространство имен. Теперь AMD, SystemJS и Webpack — это несколько библиотек, которые помогут вам в этой задаче, а начиная с ES6 модули станут чем-то встроенным в JavaScript. Что интересно, так как предлагаемый синтаксис чрезвычайно мал и его легко понять. В настоящее время без особой поддержки браузеров модули — это не то, что мы можем начать использовать сегодня. Но это не значит, что мы не можем прочитать и подготовиться к тому моменту, когда это произойдет.

8. ECMAScript 2016

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

9. AngularJS 2.0

В настоящее время одна из самых популярных сред JavaScript, AngularJS, увидела выпуск AngularJS 2.0. Наиболее заметным обновлением является переключение на использование TypeScript в качестве основного языка для создания приложений. Если TypeScript вам не подходит, не бойтесь. Приложения по-прежнему можно создавать с использованием JavaScript, но вы будете иметь дело со спорадической документацией, поскольку на момент написания она не была полностью задокументирована.

10. Офлайн-поддержка с помощью Service Workers

Одна из самых захватывающих технологий, появившихся в моем поле зрения в 2016 году, — Service Workers, и ее стоит упомянуть в этом обзоре разработки интерфейса.

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

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

Что все это значит для фронтенд-разработки в 2017 году?

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

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

Хотите повысить эффективность своего веб-сайта в 2017 году? Raygun предоставляет вам полную трассировку стека для каждого возникновения ошибки, а также информацию об окружающей среде, HTTP-запросы, необработанные данные, браузер, ОС, затронутых пользователей и многое другое. Воспользуйтесь бесплатной 30-дневной пробной версией здесь.

Первоначально опубликовано на raygun.com 21 декабря 2016 г.