Автор оригинала: Steve Belovarich.
В этом посте вы узнаете о инструментах и технологиях веб-разработчиков должны начать обучение в 2018 году. Я не собираюсь рассказать вам, какие рамки вы должны учиться, но, скорее, как оставаться актуальными в веб-разработке. Эта статья предполагает, что у вас есть знакома с JavaScript и/или веб-разработкой на любом уровне.
Если вы еще не работаете в первую очередь с ES2015 +, остановите все и начните учиться! Наличие фундаментального понимания JavaScript может увеличить ваши шансы на нанимать и, возможно, помочь вам получить высокую оплату.
Ослабевать
В конце 2017 года поддержка Webassembly отправлена на все основные вечнозеленые браузеры. WebAssembly – самый большой шанжер игры для веб-разработки в последнее время.
Webassembly (WASM) позволяет инженерам запускать двоичный код в браузере. Интернет-разработчики теперь могут писать код, который более безопасен, потому что Webassembly выполняется в песочнице браузера.
Формат WASM чрезвычайно Compact, означающий код может быть передан на провод быстрее, чем аналогичный JavaScript. Webassembly Code выполняется в ближайшее время. Другие языки, такие как C ++ и C #, могут быть скомпилированы на Webassembly, что позволяет портировать собственные приложения в браузер.
Теперь веб-разработчики имеют жизнеспособную альтернативу для кодирования веб-приложений, которые потенциально более безопасны и исполняются, чем JavaScript. Webassembly, вероятно, будет впервые использоваться для процессорных интенсивных операций, таких как машинная обучающая и компьютерная графика, но может увидеть большее принятие в будущем. При растущем количестве кибертушек, запуск веб-приложения в песочной коробке может стать требованием для некоторых корпораций для обеспечения безопасности пользователя.
Безопасность лучших практик
Это действительно не вопрос «если», но «когда пройдет следующий киратушка. Не позволяйте этому случиться на ваших часах. Это зависит от веб-инженеров, чтобы помочь пользователям в безопасности от вредоносных атак. Нет лучшего времени, чем сейчас, чтобы узнать, как защитить своих пользователей из атак на скрипты по перекрестным насадам (XSS) и перекрестных запросах (XSRF).
Если вы используете JavaScript Framework, стоит занять некоторое время, чтобы прочитать, как он предоставляет гарантиям от атак. Другим хорошим упражнением является аудит вашу кодовую базу и любой третий код вашего веб-приложения потребляет для уязвимостей или эксплойтов.
Браузеры начинают принимать более резкие меры для предупреждения пользователей, если ваш сайт еще не работает на HTTPS. В наши дни легко получить бесплатный SSL-сертификат. На самом деле нет оправдания для ухода из уязвимых для кибератаков.
Использовать async/ждать вместо обещаний
Всегда самое хорошее время для изучения новых методов ES2017 теперь, когда ECMAScript обновляется в годовом расписании. В 2017 году новый узор ES2017 Async/ждут выступил на все основные вечнозеленые браузеры и Nodejs. Async/await предлагает более лаконичный API, чем обещания для обработки асинронного программирования.
Посмотрите на этот пример функции, которая возвращает обещание. Этот код извлекает массив постов и возвращает заголовок первого поста.
function getFirstPostTitle() {
return getPosts().then(function(posts) {
return posts[0].title;
});
}
С обратным вызовом, предлагаемым обещаниями, вы можете в конечном итоге с большим количеством обратных вызовов, которые что-то возвращают. Используя Async/ждут, вы можете обрезать количество исходного кода, необходимого для этого то же самое.
async function getFirstPostTitle() {
let posts = await getPosts();
return posts[0].title;
}
Под капотом async и ждать работать так же, как обещания. Думать о async Как заявление о Новое обещание () и ждать это тогда () Перезвоните. Шаблон Async/aNaiq по существу обещает без обратных вызовов.
Начните использовать переменные CSS
Роль предпроцессоров CSS, таких как SASS и менее, продолжается разыскиваться в 2018 году. В 2017 году переменные CSS стали доступны во всех вечнозеленых браузерах. Какое огромное преимущество над SASS или менее переменными? Переменные CSS доступны через JavaScript. Ниже приведен пример того, как выглядят переменные CSS.
Допустим, у нас есть элемент, который отображает кнопку.
Используйте : root Pseudo Class, чтобы выбрать документ, чтобы дать переменные CSS глобальный объем. Затем используйте переменную в контексте стиля для кнопки.
:root {
--button-bg-color: #FF00FF;
}
.button {
color: white;
background-color: var(--button-bg-color);
display: inline-block;
padding: 4px;
width: auto;
height: 24px;
}
Получите значение переменной, используемой для стиля Фон-цвет с JavaScript, выбрав элемент, а затем вызов GetComputedstyle С элементом – пропустите имя переменной как строку к GetPropertyValue метод.
let element = document.querySelector('.button');
getComputedStyle(element).getPropertyValue("--button-bg-color") // returns #FF00FF
Переменные CSS – это полезный инструмент для стандартизации стилей по всему проекту. Интернет-разработчики должны начать использовать переменные CSS в 2018 году, теперь они поддерживаются во всех вечнозелевых браузерах.
Тень Дом
2018, скорее всего, будет годовым веб-компонентам во всех вечнозеленых браузерах. 2018 только начался и Shadow DOM V1 уже поддерживает в Chrome с частичной поддержкой, доступной в Safari и Firefox.
Shadow DOM решает длинную постоянную проблему в интерфейсной веб-разработке, где имеет только один объем. Интернет-компоненты используют то, что называется Shadow DOM для инкапсуляции кода. Shadow DOM позволяет инкапсулировать элемент, поэтому JavaScript и CSS имеют значение только для экземпляра этого элемента.
В течение многих лет разработчики должны были придумать, как JavaScript может решить эту проблему. Реагировать и Vue Используйте мнение виртуального DOM, которое похоже в концепции. Угловые эмулирует Shadow DOM с видоизоляцией и в будущем позволит инженерам перевернуть коммутатор, который превращает угловые компоненты в веб-компоненты.
Полимерная библиотека пионировала спецификацию лет назад. Со всей разговором функционального программирования в последние годы приятно видеть инкапсуляцию, отличительной чертой объектно-ориентированного программирования, приходите к DOM.
Пакет
WebPack в настоящее время является очень популярным инструментом для подключения веб-приложений, но в 2018 году Бандлер может увидеть некоторую жестокую конкуренцию из посылки. Посылка предлагает «пылающий быстрый, нулевой конфигурацию Bundler Bundler». Посылка достигает более быстрого времена сборки на УБПАК, кэшируясь и используя несколько сердечников вашего процессора.
Посылка предлагает нулевую конфигурацию, в отличие от WebPack, который может потребовать много конфигурации. Посылка предпочитает код по конфигурации, но единственное время вы напишите код, при разработке плагина посылки.
Кривая обучения посылки проще, чем усерд. Просто установите плагины посылки Ваш проект требует через пряжу или NPM и запустить parcel index.html Отказ Посылка предлагает более опыт, чем WebPack, позволяющий сконцентрировать на разработке приложений. Посылка запущена в конце 2017 года. Поскольку экосистема растет в 2018 году, вы можете оказаться, что смотрите на посылку для объединения вашего следующего веб-приложения.
Обновлять WebSockets к RTCDatachannel
С запуском Safari 11 в 2017 году Rtcpeerconnection и Rtcdatachannel API стал доступен во всех вечнозеленых браузерах. Интернет-разработчики теперь могут надежно обеспечить одноранговое соединение в браузере на WeBRTC. Возможно, вы использовали WEBRTC до того, как в Google Hangout, даже не зная его, так как был впервые введен несколько лет назад в Chrome.
Как только пользователи установили связь с Rtcpeerconnection Они могут общаться с Rtcdatachannel API. Пользователи могут передавать строку, BLOB, JSON и ArrayBuffer через зашифрованный браузер RTCDATATATATATATATATHATATACHANTEL для браузера, вырезая необходимость в задневшем сервере для обмена сообщениями. Если вы полагаетесь на Websocket для P2P, 2018 год, это год, чтобы перенести пользователей в WEBRTC для лучшего опыта.
Обновите ваши сценарии Nodejs на ES2015 +
В 2017 году NODE LTS оказала поддержку методам ES2015 +, за исключением модулей ES2015, которые приземлились на экспериментальный статус в узле 9.3.3.0. 2018, скорее всего, будет в год, когда вы, наконец, можно мигрировать все эти требуется утверждения для использования Импорт В ваших проектах Node.js. Если вы еще этого не сделали, обновите все проекты Node.js, чтобы использовать синтаксис ES2015 +.
Выберите JavaScript Framework и узнайте его
Вы можете увеличить свои шансы на то, чтобы принять участие, если вы знаете, по крайней мере, один JavaScript Framework. Реагирование было самым популярным FRAEMWORK за последние пару лет, но многие компании все еще полагаются на угловой.
Уже вложил в угловую или реагировать? Узнайте коллегу и, возможно, вам понравится больше. Знание более одной рамки может помочь вам почувствовать себя уверенно, чтобы добавить больше возможностей работы. Vue – это удивительная альтернатива реагировать на развитие пользовательского интерфейса. Если у вас закончились каркасы, чтобы узнать, начните изучать webassembly!
Я надеюсь, что этот список полезен для того, чтобы кто-нибудь пытался остаться в опережении кривой в веб-разработке. Есть ли у вас другие идеи для того, что инженеры должны сосредоточиться в 2018 году? Снимите комментарий ниже.