Каждый раз, когда я чувствую, что в этом мире нет ничего более неуловимого, чем любовь, я швыряю себе в лицо только что изданную передовую книгу. . .
В мгновение ока прошел 2017 год и наступил новый год. Если бы мне нужно было подвести итоги года, я бы никогда не упомянул о своих планах, намеченных в 2015 году, которые должны быть реализованы в 2016 году и не завершены до 2017 года. И если бы мне нужно было сделать новогоднее обещание на 2018 год, оно было бы примерно таким:
«Однажды в 2018 году родился фреймворк под названием universal.js. Уже через 10 минут после его выпуска количество звездочек на github перевалило за 100 тысяч. За этим последовало восхищение и восхищение всего сообщества фронтенд-разработчиков. Поклонение. Синтаксис universal.js краткий и усовершенствованный, но строгий, в сочетании с его естественной высокоэффективной производительностью и гибкостью для универсальных сценариев использования, теперь людям больше не придется беспокоиться об изучении того, какая структура и синтаксис JavaScript, и будет устранена усталость от фронтенда. Если он снова появится, universal.js сможет захватить весь мир фронтенда одним движением».
Если бы такой единый фронтенд-фреймворк действительно появился в 2018 году, всех фронтенд-разработчиков будили бы по ночам от смеха.
YY закончился, позвольте мне вернуться к реальности, позвольте мне начать с моей поверхностной точки зрения, прояснить свои мысли и изучить, какие области в области фронтенд-разработки в 2018 году достойны моего внимания и времени для изучения.
1. Средства разработки/программное обеспечение
1. Text Editor/IDE
Большая и раздутая IDE не подходит для фронтенд-разработки. Поэтому легковесные редакторы документов стали любовью фронтендеров. Среди многих популярных редакторов документов VSCode (разработан Microsoft), Atom (разработан GitHub) и Sublime Text (разработан Джоном Скиннером, богом Google) — это три редактора, которые меня больше всего интересуют и нравятся больше всего. В Интернете есть много статей о сравнении производительности этих трех.Общий вывод состоит в том, что комплексная производительность VSCode и Sublime Text (включая открытие и закрытие файлов, поиск и т. д.), в то время как Atom является худшим, часто дает сбои и вылетает и занимает больше всего ресурсов.
Лично я использовал Sublime Text раньше, и однажды год назад мне случайно выдали пакет от Atom (режим активной мощности, этот спецэффект настолько прост, что вы можете мгновенно влюбиться в написание кода...) Посадив траву, я решительно отказался от мощнейшего Sublime Text и обратился к Atom. За год использования Atom я сталкивался с частыми зависаниями, вылетами и вылетами. Но я до сих пор не отказался от него, потому что мне очень нравится пакет Atom. На данный момент на GitHub доступен уже 7171 пакет для Atom, а это 7000 человек в гареме. Именно их существование позволяет мне мириться с проблемами производительности Atom.
По сравнению с Atom, который был выпущен только в 2014 году, Sublime Text дебютировал еще в 2007 году и дебютировал в течение десяти лет. Можно себе представить, сколько будет ярых поклонников у Sublime Text. в 2017 годуОтчет о опросе разработчиков Stack Overflow, Sublime Text — третья по популярности среда разработки. Я считаю, что с его отличной производительностью и количеством пакетов наравне с Atom, Sublime
Text останется в тройке лидеров рейтинга сред разработки в 2018 году.
Как самый молодой VSCode из трех (выпущен в середине 2015 года), я им раньше не пользовался. Но причина, по которой я его перечислил, та же, что и при переходе с Sublime Text на Atom год назад, и была подброшена одним из его плагинов. Правильно, это тот, который может отображать функцию отладки Chrome непосредственно в VSCode, отлаживать JavaScript с точками останова, на самом деле 666. Конечно, будучи самым молодым, Плагин на данный момент не так богат, как Atom и Sublime Text. Но это не мешает моему живому интересу к нему, и я должен попробовать VSCode в 2018 году.
2. Браузер
Если бы мне пришлось голосовать за лучшие браузеры, Chrome и Firefox постоянно держали бы меня в замешательстве, потому что, по моему мнению, они оба лучшие. Если вы большой поклонник Internet Explorer (вы уверены?), то можете пропустить этот абзац. К сожалению, я не могу комментировать IE, потому что я действительно мало что знаю о нем (в основном, не хочу знать...), и каждый раз я использую готовые скрипты polyfill putty, чтобы развлечь IE.
К Chrome и Firefox у меня совершенно другое отношение, и богатые плагины, которые есть у обоих, вызывают восхищение. Chrome поставляется со своими собственными инструментами для разработчиков, в то время как Firefox предлагает полностью ориентированный на разработчиков браузер Firefox Developer Edition. Последняя версия браузера Firefox Quantum, выпущенная недавно, более чем в два раза превосходит по производительности обычный браузер Firefox. Он не только имеет встроенный движок CSS нового поколения, но также является первым браузером, предоставляющим инструменты настройки для разработки и дизайна CSS Grid (более поздняя версия Chrome 57 также добавила поддержку CSS Grid. Поддержка функции сетки).
В повседневной разработке я больше привык использовать инструменты разработчика Chrome, потому что начало работы начинается с Chrome. Firefox больше используется как инструмент тестирования совместимости браузера. После того, как я узнал о многих интересных функциях Firefox Quantum, я все больше и больше чувствую, что использовать его только для совместимости с браузером — пустая трата времени. Пришло время хорошенько взглянуть на инструменты разработчика Firefox.
3. User Interface
Обычно я редко делаю эту часть пользовательского интерфейса, которую обычно делает веб-дизайнер. Но я по-прежнему использовал Photoshop и Sketch, два инструмента для дизайна пользовательского интерфейса, но использовал только их. Мне лично очень нравится Sketch, я считаю, что для начального уровня Sketch имеет более мягкую кривую обучения, чем Photoshop, который позволяет людям быстро начать работу и является более удобным для пользователя. Итак, начинающим разработчикам, которые хотят попробовать себя в дизайне, я лично рекомендую Sketch. Если у меня будет время, я также возьму урок по Sketch, чтобы улучшить свой уровень осанки при использовании программного обеспечения для дизайна.
2. HTML/CSS
1. CSS Flexbox and Grid
Недостаток использования CSS-фреймворков в течение длительного времени в том, что люди постепенно забывают CSS. Они забывают, как писать макеты, не полагаясь на CSS-фреймворки, и даже забывают некоторые самые базовые знания CSS. Когда я посвятил большую часть своего времени изучению JavaScipt, я оглянулся назад и с ужасом понял, что больше не знаю, как реализовывать сложные макеты с помощью CSS. Как будто я углубляюсь в вождение своей машины только для того, чтобы обнаружить, что шины исчезли. Даже если вы пригласите старого водителя с отличными навыками вождения, вы не сможете отправить машину. Итак, в новом году мне нужно «починить шины». Итак, с чего начать? Начиная с Flexbox и Grid, конечно.
Мое нынешнее понимание компоновки CSS все еще относится ко времени использования блоков, строк, позиций, таблиц и плавающих элементов, и когда я ищу сообщения в блогах, связанные с CSS, я обнаруживаю, что компоновка CSS вступила в новую эру Flex и Grid. Кажется, что использование только нескольких традиционных свойств отображения CSS больше не может удовлетворить потребности все более сложных макетов веб-страниц. Недавно добавленные модули flexbox и grid предоставляют более комплексные технические средства для решения сложных адаптивных макетов веб-страниц. Вы спрашиваете, какой модуль лучше изучать? Ответ заключается в том, что у вас нет выбора, вы должны научиться обоим. Между ними нет конкуренции, но они дополняют друг друга. Поэтому нет вопроса, кто лучше, есть только вопрос, кто больше подходит для использования в конкретном сценарии компоновки.
2. Препроцессор CSS
Что такое препроцессор CSS? Я думаю, это можно объяснить по аналогии. Препроцессор CSS похож на CSS-версию Babel, транскодера CSS. Babel может перекодировать ES6 в ES5 с большей поддержкой среды, в то время как препроцессоры CSS перекодируют определенные языки сценариев в традиционный код CSS. Синтаксис конкретного языка сценариев зависит от того, какой препроцессор CSS вы используете. Использование препроцессоров CSS позволяет нам писать более лаконичный и понятный код, экономить время, упрощает организацию и планирование, а также облегчает дальнейшее обслуживание.
В настоящее время существует три основных препроцессора CSS: Sass, Less и Stylus, наиболее популярным из которых является Sass. Это не то, что я сказал,Сопоставлено:
Из трех препроцессоров, которые я научился использовать только Sass, причина в том, что он самый популярный. В сфере front-end разработки считается, что у каждого есть фобия выбора, при обсуждении front-end ветки есть куча отработанных технических решений на выбор. Чтобы не дать себе испытать этот «страх», я выбрал самый простой и грубый подход: узнать, какой из них самый популярный, при условии, что нет большой разницы в сценариях использования производительности и т. д. Итак, я влюбился в Сасса. Еще одна вещь, которая мне нравится в Sass, это то, что ее розовый логотип с первого взгляда напоминает мне одну из моих любимых игр, Grand Theft Auto Vice City. Похоже, выбор технологического продукта зависит еще и от глаза...
3. HTML/CSS Framework
Как только я сказал о фобии выбора, множество фреймворков HTML/CSS явились мне самым ярким примером. Twitter Bootstrap, Materialise CSS, Semantic UI, Zurb Foundation, Bulma и этот список можно продолжить. Bootstrap, один из самых популярных фреймворков CSS, запустил свою четвертую версию, и исходный код использует Sass в качестве препроцессора CSS. Что касается выбора обучения и использования фреймворка, то с препроцессорной частью CSS вы никогда не пожалеете, выбрав самый популярный.
3. JavaScript
1. Родной JavaScript
Есть много способов вылечить усталость от JavaScript. Но, насколько я знаю, среди больших парней в индустрии существует такой консенсус: хорошо изучайте нативный JavaScript. Это звучит как большое облегчение, потому что нам не нужно сталкиваться с длинным списком изучения различных инструментальных фреймворков. На самом деле, я думаю, что изучение нативного JavaScript — это самое сложное, самое энергоемкое и времязатратное занятие. Что касается меня, я чувствую, что изучил нативный JavaScript, когда могу делать три вещи:
(1) Квалифицированная работа с DOM (избавьтесь от jQuery)
«Этот человек забывает, как писать JS, как только он манипулирует DOM. Baidu/Google делали это три раза за последний день. Это хлопотно! Теперь, с jQuery, вы можете проверить это один и пять раз в прошлом, очень эффективен и требует меньше кода. DOM был изменен, никаких усилий!"
Не знаю, как у всех, но это мой личный опыт после использования jQuery. Его действительно легко использовать, но недостатком является то, что он ускоряет забывание нативного JS. Если нативный JavaScript — это базовый навык, то jQuery — магический трюк JavaScript, это просто JavaScript, завернутый в простую и удобную в использовании оболочку. Моя идея состоит в том, чтобы научиться у jQuery тому, как сделать свои собственные манипуляции с DOM без использования jQuery. Изучите исходный код, изучите шаблоны проектирования. Поскольку jQuery может инкапсулировать и разрабатывать нативный JavaScript так лаконично и быстро, он должен быть тем, кто лучше всех «знает» нативный JS, и он должен быть отличным «учителем нативного JS».
(2) Новые функции ES6/ES2016/ES2017
Причина, по которой я думаю, что действительно сложно хорошо изучить собственный JavaScript, в значительной степени заключается в том, что стандарт ECMAScript регулярно обновляется каждый год с момента выпуска ES6 в 2015 году. Обновление приносит не только более эффективный и простой в использовании JavaScript, но и увеличивает затраты на обучение благодаря новым функциям и новому синтаксису. Однако, к счастью, с компанией Babel мы можем научиться уверенно использовать ES6. В конце концов, есть еще что-то, что может в принципе снять наши опасения по поводу неподдерживаемого браузера. Я видел, как ES2018 машет вперед, давайте учиться.
(Примечание: awesome в американском разговорном означает потрясающий. Не берите это из словаря, потому что словари всегда переводят awesome как ужасный... Словари суеверий ужасны...)
(3) Может самостоятельно писать различные функции инструментов, аналогичные библиотеке инструментов Lodash.
Я впервые использовал, когда Lodash, есть ощущение собственного PHP. Библиотека PHP хоть и хаотична, ее критикуют, но должен признать, она действительно слишком проста для написания PHP, и встречающиеся в работе и я могу придумать почти все возможности функций PHP готовы для меня использовать. Lodash и Underscore в этой библиотеке инструментов JS категории не только для оптимизации функций, присущих JS, но и добавили много новых полезных функций. Тем не менее, с добавлением многих новых функций и популярности ES6 и других подобных библиотек инструментов Lodash кажется, что незнакомец, в конце концов, не является естественным. Однако, как и jQuery, Lodash также «концентрирует» группу выдержек, содержащих различные нативные JS-операции и дизайн самых разных навыков. В настоящее время, но использовать его только один раз, пытаясь реализовать функцию, для меня было бы ошибкой, Lodash определенно имеет отрезвляющую силу.
2. JavaScript-фреймворк
React, Angular и Vue лучше или хуже, и кто победит? В кого я попаду в 2018 году? По оценкам, анализ займет около тысячи слов. . . Чтобы убедиться в читательском опыте, давайте послушаем следующее разложение. . . (Вообще-то, написав столько на одном дыхании, я пока не могу писать, давайте потихоньку)
Продолжение следует... Продолжение следует