1. Введение
2017 год прошел спокойно, наступил 2018 год. Люди прогрессируют, технологии развиваются. В 2018 году на какие передовые направления и технологии стоит обратить внимание, какие технологии будут расти, а какие будут падать. Ниже приводится мое личное суждение, чтобы сделать прогноз и суждение, я надеюсь, что оно может сыграть справочную роль для всех! Технологии, упомянутые ниже, только рекомендуется всем обратить внимание.Не рекомендуется, чтобы каждый должен изучать их все, но рекомендуется, чтобы каждый учился по требованию, какие из них, по вашему мнению, необходимо изучить, а какие вы интересно учиться! Если у вас есть какие-либо инструменты, фреймворки и библиотеки, которые, по вашему мнению, вы можете порекомендовать, делайте предложения в области комментариев, чтобы все могли добиться прогресса и учиться друг у друга!
2.PWA
PWA(Progressive Web Apps)Ряд решений, предложенных Google и разработанных с использованием передовых технологий, позволяющих веб-страницам использовать возможности приложений. Ясно одно: PWA — это веб-страница, а веб-приложение можно разработать с помощью передовых технологий.
С тех пор, как Google предложил PWA, он продолжает привлекать внимание отрасли, и его популярность очевидна. Только в этом году Google также объявил:PWA получат те же права и права, что и нативные приложения Android.. Это означает, что основная веб-страница и приложение в будущем будут все ближе и ближе, поэтому внимание к ним будет расти.
Ссылка на данные:
Начало работы с PWA: написание очень простой страницы PWA
【Перепечатка】Ваше первое прогрессивное веб-приложение
[Перепечатка] Модель веб-приложений нового поколения: Progressive Web App
3.TypeScript
TypeScript разработан Microsoft. Это превосходный, бесплатный язык программирования JavaScript с открытым исходным кодом. В этом языке добавлен необязательный статический тип и объектно-ориентированное программирование на основе классов. Связь между TypeScript и JavaScript показана на следующем рисунке!
(Источник фото Мужи--От JavaScript к TypeScript)
Angular начал использовать машинописный текст для разработки, а react и vue еще больше углубили свою поддержку машинописного текста. Нетрудно узнать, насколько популярен typeScript!
Ссылка на данные:
Официальная документация TypeScript
Набор ресурсов TypeScript
От JavaScript к TypeScript 1 - Что такое TypeScript(После прочтения первой статьи не оставляйте несколько статей из этой серии)
4. Насколько опасна посылка для вебпака?
webpackВсем известно, что это инструмент для упаковки модулей JavaScript.Короче говоря, он анализирует, компилирует и упаковывает каждый модуль, так что выходной файл можно запустить в браузере.
(Картинка взята из учебника для новичков-Начало работы с вебпаком)
Хотя работа webpack является инструментом упаковки модулей, он также может заменить некоторые функции инструментов автоматической сборки, таких как gulp! После разработки в 2017 году популярность webpack очевидна для всех.
Но но. В конце 2017 года появилась темная лошадка:parcel. Посылка превзошла ожидания большинства людей и стала одним из самых больших сюрпризов 2017 года. Когда дело доходит до самого большого преимущества посылки, это кажется самым большим недостатком веб-пакета: конфигурация и производительность! Parcel претендует на нулевую конфигурацию, многоядерную упаковку и использует кеширование файлов, которое почти в 10 раз быстрее, чем webpack по времени!
(Картинка взята из статьи Нила-Анонс Parcel: быстрый инструмент для упаковки веб-приложений, не требующий настройки)
С точки зрения звезды, в то время Parcel привлекал больше внимания, чем webpack, и его популярность сохраняется.
Сложность использования вебпака, я думаю, в том, что конфигурация громоздка, а документация не идеальна, и смотреть на нее сбивает с толку. Что касается времени упаковки, то можно только сказать, что без сравнения нет вреда. Если Parcel сможет выполнить эти пункты, возможно, он сможет получить много мяса от webpack.
Анонс Parcel: быстрый инструмент для упаковки веб-приложений, не требующий настройки
Parcel Vs Webpack
5.WebAssembly
Проект общего двоичного и текстового формата для Интернета в сотрудничестве с такими компаниями, как Google, Microsoft, Mozilla и Apple.
Процитирую команду Tencent IVWEB: WebAssembly — это новый формат байт-кода. Его аббревиатура — «.wasm», .wasm — суффикс имени файла, это новый низкоуровневый безопасный двоичный синтаксис. . Он определяется как «тонкий, быстрый формат времени загрузки и модель выполнения» и разработан как формат объектного файла веб-языков программирования. Это означает огромный прирост производительности на стороне браузера, а также позволяет нам реализовать набор низкоуровневых строительных блоков, таких как строгая типизация и область видимости на уровне блоков.
Когда WebAssembly впервые появился, некоторые разработчики даже предполагали, что в будущем WebAssembly заменит JavaScript. Здесь я чувствую, что JavaScript не будет заменен WebAssembly, ожидающим смерти, но сосуществующим с WebAssembly! В 2017 году четыре браузера Chrome, Firefox, IE и Safari были объединены с помощью решения WebAssembly. Это редкая ситуация. Я знаю, что такая унифицированная ситуация возникла впервые. Важность WebAssembly. Как будет развиваться WebAssembly в 2018 году, сказать сложно, предварительный прогноз должен быть популяризация, но до стадии популяризации и развития дело пока не дошло. Но несмотря ни на что, на это стоит обратить внимание!
Давайте поговорим о том, что такое WebAssembly? Почему вы говорите, что это касается каждого веб-разработчика?
WebAssembly в действии: как писать код
6. реагировать, угловой, вуе тройка
В 2017 году бурное развитие React, Vue играет роль темной лошадки фреймворка, и хотя внимание angular уже не так хорошо, как раньше, его нельзя игнорировать! Как видно из отчета об опросе 2017 года, тенденция в основном такова, что react стал мейнстримом, и ни один фреймворк не занимает второе место, а angular1 и angular2 занимают третье и четвертое места.
Ситуация в Китае такова, что сначала реагируют, а потом
Vue был очень популярен в 2017 году, но потенциал Vue в 2018 году не следует недооценивать, как показано на рисунке ниже (1,2 Вт человек хотят использовать Vue). Хотя вероятность превышения реакции не очень велика, положение все равно будет улучшаться
использованная литература
Отчет об исследовании JavaScript за 2017 г.
Какие изменения произошли в области фронтенда в 2017 году и чего вы ожидаете от 2018 года?
Обзор событий и трендов 2017 года. Куда пойдет 2018 год?
Отчет о состоянии JavaScript за 2017 год: 23 000 разработчиков спросили, и они дали этот ответ
Самые примечательные тренды JavaScript 2018 года
В любом случае я не считаю фреймворк лучшим, только наиболее подходящим. Тройка не говорила, что они должны знать их всех! Во-первых, если основа js хороша, будет легче изучить фреймворк. Если вам предстоит изучать js и начинать работу непосредственно с фреймворком, запутаться будет очень сложно и легко.
7. ИИ и большие данные
Искусственный интеллект и большие данные — это не технология, а поле, они очень популярны в последние два года, и не ограничиваются фронтендом. Я также думаю, что это следующая волна дивидендов для Интернета. Очень стоит посмотреть и поучиться! Это также популярная тенденция, поэтому некоторые инструменты визуализации данных (диаграмма, D3 и т. д.) и библиотеки искусственного интеллекта привлекают внимание!
8.yarn VS npm
Считается, что, столкнувшись с фронтенд-инжинирингом, модульные разработчики неизбежно будут использовать npm для установки зависимостей для пакетов функций. Особенно на заре node.js npm был стандартом для инженеров. Но в 2017 статусу npm явно угрожает пряжа! По результатам опроса в этом году пряжа также превзошла npm. Плюсы пряжи: быстро, безопасно и трогательно! Если ситуация сохранится, разрыв будет постепенно увеличиваться!
использованная литература
пряжа, а не еще один сторонний клиент npm
Yarn против npm: все, что вам нужно знать
9. CSS в js все еще вызывает споры?
Во внешнем интерфейсе всегда рекомендуется разделять уровень структуры (html), уровень представления (css) и уровень поведения (javascript). Но после того, как вышел React, это правило, казалось, было отменено! Из-за компонентной структуры реакции требуется писать html, css и javascript вместе. Многие разработчики не привыкли или даже против использования css в js. Так что в новом 2018 году споры продолжатся?
использованная литература
Введение в CSS в JS
Интенсивное чтение «Пожалуйста, остановите поведение css-in-js»
Что вы думаете о CSS в JS?
Хватит писать CSS на JavaScript
10. Гибкие и сетчатые макеты более популярны
В предыдущем макете страницы интерфейса встроенный блок, плавающий макет, макет размещения и т. д. Но с flex и grid макет становится намного проще.
Во-первых, flex поддерживается практически всеми браузерами, а его удобные функции приветствуются многими разработчиками!
(Картинка взята из онлайн-дневника Жуань Ифэна.Учебное пособие по гибкому макету: синтаксис)
А грид, грид-макет известен как макет следующего поколения, но совместимость с браузерами не так хороша, как флекс. Но это тоже необходимо знать. В конце концов, он был включен в стандарт W3C. Совместимость также дополнительно улучшена.
использованная литература
Учебное пособие по гибкому макету: синтаксис
Учебное пособие по Flex Layout: примеры
CSS Grid Layout: что такое Grid Layout(После прочтения этой статьи рекомендуется последовательно прочитать следующие статьи, все из которых представляют собой серию статей, написанных Да Мо, и качество очень высокое)
CSS Grid VS Flexbox: сравнение примеров
11.rxjs
Я немного разбираюсь в rxjs, но я еще не использовал его.Может быть, все относительно незнакомы с ним, но я поместил его здесь, потому что я думаю, что rxjs все еще стоит рекомендовать. Цитируя официальный сайт: RxJS — это библиотека для реактивного программирования с использованием Observables, которая упрощает написание асинхронного кода или кода на основе обратного вызова. Этот проект представляет собой переписанный вариант Reactive-Extensions/RxJS (RxJS 4) с улучшенной производительностью, улучшенной модульностью, улучшенным отлаживаемым стеком вызовов при сохранении в основном обратной совместимости с некоторыми критическими изменениями (критическими изменениями) для уменьшения внешнего API.
использованная литература
rxjs китайская документация
Простое введение в rxjs
Популярный способ понять RxJS
12. Другие аспекты
Из-за ограниченного пространства есть несколько других, на которые, я думаю, тоже стоит обратить внимание. следующим образом
Апплеты
Во-первых, апплет WeChat, с момента выхода апплета WeChat многие фронтенды жаловались. В беседе с другими многие люди также упоминали: «Как только апплет вышел, я подумал, что у него нет будущего. Или это так: убить АПП невозможно, апплет - это просто кастрированная версия АПП, и конкурирующие производители апплета развивать не будут. Также есть: учиться этому не так хорошо, как уделять внимание PWA, которое более значимо, чем это. Наверное, в этом смысл слов, о которых я говорил.В 2017 году меня больше интересовала разработка небольших программ, так что в 2017 году я вообще не изучал маленькие программы. Но в четвертом квартале 2017 года или в конце года WeChat объявил, что может встраивать html5-страницы и разрабатывать небольшие игры. Позвольте мне прочитать апплет и только что выпущенную популярность. В 2018 году как будет развиваться мини-программа, и свяжусь ли я и научусь разрабатывать мини-программы, поживем-увидим. Но и на то, и на другое стоит обратить внимание.
Второй — это апплет Alipay, который хоть и не кажется новостью, но все же является продуктом большой фабрики. Внимание стоит обратить внимание. А уж учиться или не развиваться, это другой вопрос!
Electron
Известен как отличный артефакт для разработки настольных приложений. Я также попробовал несколько официальных примеров, и он работает очень гладко, но, поскольку я пока не занимаюсь разработкой настольных приложений, я не обращал на это особого внимания и не изучал его. В 2018 году еще буду обращать внимание и даже учиться развиваться!
WebVR и WebAR
Почитайте так называемые попутные инстансы, эти эффекты VR и AR меня не интересуют, хотя те инстансы, я так и не понял насколько устарели разработки. Но для этого, беспокойство все еще стоит. В конце концов, это был бы WebVR, а WebAR только начал.
13. Какие технологии провалятся/проскочат
angular
Как упоминалось ранее, angular по-прежнему широко используется во фронтенд-фреймворке. Гугл тоже выпустил 5.х, значит он тут появится? Это всего лишь небольшой прогноз. В 2017 году ситуация с обсуждением angular относительно невелика, а в 2018 году уровень использования angular будет продолжать снижаться, но не будет снижаться, и он по-прежнему занимает большую позицию во фронтенд-фреймворке. В 2018 году angular по-прежнему будет тремя основными фреймворками с теми же именами, что и react и vue, но у него не так много пользователей, как у react и vue.
jquery
jQuery не упадет в 2018 году, но уровень использования будет еще меньше. Когда дело доходит до jquery, времена действительно меняются.Когда я впервые столкнулся с внешним интерфейсом, jquery доминировал в мире. В то время, по сравнению с другими библиотеками и фреймворками, jquery был гигантом, и его использование было далеко впереди. Даже Microsoft поддерживает jquery на платформе .net. Когда я только начинал работать, негласным правилом было: если ты не знаешь jquery, никто не признает, что ты фронтенд. Вы можете увидеть статус jquery в это время. Я также считаю, что у многих людей есть чувства к jquery. Просто технология не говорит о чувствах!
Синтаксис для версий ниже es5
Упомянутый в этом абзаце es6 представляет грамматику выше es6, включая es7, es8. es5 представляет синтаксис ниже es5, включая es3
После двух лет разработки ES6 приветствовался многими разработчиками для его удобства и практичности. 2017 должен быть в первый раз, когда скорость использования синтаксиса ES6 превышает уровень ES5. В 2018 году скорость использования синтаксиса ES6 будет продолжать увеличиваться. Скорость использования грамматиков, таких как ES5, будет продолжать снижаться. Даже для текущего развития Вавиле все еще необходимо использовать для компиляции синтаксиса ES6 в ES5.
grunt
Когда был выпущен gulp, состояние grunt сильно пострадало, и теперь вместо некоторых инструментов инструментов автоматической сборки есть инструменты упаковки, кажется, что роль инструментов автоматической сборки не так хороша, как раньше, не говоря уже о том, что есть лучшая сборка в рыночных инструментах --gulp.
sea.js
sea.js был разработан китайцами, и я был очень счастлив, когда пользовался им в свое время.Наконец-то что-то от китайцев вышло на сцену. sea.js очень популярен благодаря своей простоте и легкости. Но после модуляризации es6 даже Ю Бо, автор sea.js, выступил на Weibo с речью: Sea.js и KISSY нужно поставить надгробие.
14. Резюме
Ну а про личные прогнозы на 2018 год по поводу фронтенда и некоторые рекомендуемые опасения написано здесь! Хотя я так много написал, я не имею в виду, чтобы изучить их все, но я предлагаю всем обратить внимание.Какие технологии изучать, зависит от того, что вам нужно и что вас интересует. Упомянутые статьи - это только то, на что я обычно обращаю внимание, а некоторые из них - только мое понимание, но я не изучал и не использовал их глубоко. Я также чувствую, что с точки зрения интерфейса нет лучших инструментов, фреймворков, библиотек и т. д., есть только наиболее подходящие для вас.
Наконец, если у вас есть какие-либо инструменты, фреймворки, библиотеки или другие технологии, поделитесь советами и предложениями в области комментариев. Пусть все учатся друг у друга и совершенствуют друг друга!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина