Автор | Гань Чаоян (Сяо Вэнь) Редактор | Orange Jun Произведено | Alibaba New Retail Tao Department Технологический отдел
Мы можем сравнить маршрут обучения с повышением ранга в игре, и каждый ранг имеет свое собственное положение и упражнения:
- Бронза — Начинающие с нуля учащиеся начальных классов: полные энтузиазма, видящие надежду и будущее этой отрасли, готовые приступить к изучению знаний в области веб-разработки. А. Сначала изучите основные операции HTML, CSS и JavaScript с помощью бесплатных учебных ресурсов, таких как w3cschool. Б. Напишите простую страницу признания для своей девушки/друга, чтобы показать результаты вашей тяжелой работы.
- Серебро — Начинающие: Знайте, как использовать HTML, CSS и JavaScript для реализации основных функций разработки страниц. А. Выберите проект, который может охватывать различные сценарии и может регулировать сложность в соответствии с вашими пожеланиями, например, система блогов, бухгалтерская книга, редактор Markdown и т. д. б. Выберите один из двух фреймворков React и Vue, чтобы изучить
- Золото — Знакомые новые игроки: знание того, как использовать фреймворк для реализации проектов, приведенных выше А. Изучите инструменты управления состоянием, такие как Redux, Vuex или MobX, и используйте их в предыдущих проектах. Б. Подумайте, какие преимущества инструменты управления состоянием приносят вашему проекту.
- Platinum V — начинающий драйвер: знает, как использовать строительные леса для создания проектов, и может организовывать структуру кода в соответствии с идеей модульности. А. Изучите TypeScript, перепишите предыдущие проекты и сосредоточьтесь на управлении структурами данных и типами. б) Изучите Node.js и попробуйте внедрить CMS (систему управления контентом), более сложную, чем система блогов с базой данных, например, систему управления библиотекой, систему управления складом.
- Platinum I — хороший драйвер: если вы знаете, как писать бизнес-код с помощью Node.js или TypeScript. А. Подумайте, какой код является избыточным и какая логика может использоваться несколькими компонентами в предыдущем проекте, разработанном с использованием фреймворка. б) Научитесь использовать стандарты JavaScript ES2015 или более новые, чтобы постепенно заменять код, написанный с использованием фреймворка.
- Diamond V — спокойный и естественный старый драйвер: если у вас есть определенное понимание и опыт логической абстракции и инкапсуляции модулей А. Подумайте, как использовать чистый JavaScript для абстрагирования кода, не связанного с рендерингом и DOM, в бизнес-компонентах. б) Внедрить инструменты модульного тестирования для тестирования чистого логического кода и стремиться к степени охвата более 80%.
- Алмаз I - Новичок на трассе: если вы выполнили вышеуказанные условия. А. Подумайте о разнице между различными философиями кода (OO, FP и т. д.) и различными структурами кода (MVC, MVVM и т. д.). б) Подумайте об исходном замысле дизайна между разными фреймворками и подумайте о разнице между разными решениями одного и того же типа проблем на разных языках программирования.
Здесь я провел чисто технический маршрут от 0 до уровня Senior Front-end Engineer. Я полагаю, что многие опытные студенты обнаружат, что я пропустил большую часть содержания в середине, но нетрудно заметить, что «обучение» в первой половине маршрута постепенно становится «мышлением» во второй половине. В дополнение к накоплению чистых технологий, отличные инженеры также должны больше думать о технологиях, команде и ROI (окупаемость инвестиций). Конечно, этого все еще недостаточно, чтобы поддержать нас во время «кризиса программистов 35-летней давности». "гладко. , Впереди еще долгий путь, и на бубне еще король. Кто сказал, что программисты - молодые люди? Вспоминая, что много лет назад я был таким же полным новичком, как и вы, я начал изучать и изучать веб-разработку медленно с 0, и даже позже я не пошел в класс, чтобы изучать компьютер, так что давайте послушаем, какой я "предшественник" Пока давайте полагаться на истории самоучек.
мой начинается с 0
Я фронтенд-инженер, начинал полностью с самообучения, помню, что впервые столкнулся с фронтендом еще в младших классах, было бы очень популярно арендовать VPS, а потом зарегистрировать бесплатный .tk доменное имя. Маленькому ребенку, который только начал заниматься веб-разработкой, очень интересно исследовать «мир взрослых» таким образом. Самым популярным программным обеспечением для управления блогами в то время был WordPress, написанный на PHP.Как очень зрелое программное обеспечение CMS, WordPress в то время имел очень богатые ресурсы сообщества, такие как темы, шаблоны, плагины и так далее. Как маленький ребенок, который уделяет большое внимание персонализации, конечно, он должен сделать тему самостоятельно! Поэтому я встал на путь невозврата для веб-разработки.До этого я познакомился с родными языками, такими как Visual Basic. Используя темы WordPress в качестве отправной точки, я начал изучать PHP для вызова API-интерфейсов WordPress и вывода контента, изучать HTML для шаблонов для написания тем, изучать CSS для «украшения» моего блога и изучать jQuery для динамических эффектов страницы. Да, в то время большинство людей в основном связывались с jQuery вместо JavaScript, и функция $ может выполнять множество эффектов, что заставило меня впервые почувствовать ценность «фреймворка». Итак, шаг за шагом произошло следующее (не обязательно точно правильное, в конце концов, это было слишком давно):
- Я обнаружил, что некоторые эффекты стиля на странице не могут правильно отображаться в браузере IE, поэтому я начал заниматься различными специальными онлайн-обучениями CSS в IE, включая использование reset.css, normalize.css и других инструментов;
- Каждый раз, когда вы нажимаете на ссылку, вам приходится обновлять страницу, и опыт был очень плохим в те времена, когда скорость сети была не очень хорошей, поэтому я начал изучать, как использовать jQuery/JavaScript для переключения содержимого страницы. страница без обновления страницы; А. При просмотре документа обнаруживается, что браузер поддерживает технологию под названием XMLHTTPRequest, которая позволяет нам получать информацию с сервера без прыжков Отсюда мы начинаем понимать разницу между тремя различными форматами HTML, XML и JSON; б) Впервые я узнал, что чистые данные в формате JSON можно передавать через сервер, а затем внешний интерфейс анализирует данные через JavaScript и рендерит их в полноценный HTML в сочетании с внешним шаблонизатором; c. Отсюда вы можете узнать, как передавать информацию на сервер через путь, запрос, хэш и тело запроса POST и PUT и другую информацию в URL-адресе, и сервер динамически обрабатывает различные данные и возвращает результат через эту информацию; г. Привычки разработки SPA (Single Page Application) формируются;
Так я пришел к «серебряному» этапу.
Свяжитесь с Node.js
Пока я с радостью разрабатывал собственную тему для WordPress, я наткнулся на новую технологию — Node.js — на внешнем веб-сайте. Встреча с ним изменила мой путь обучения в будущем, который влияет на меня по сей день. В 2009 году Райан Даль выпустил среду выполнения программы Node.js, основанную на разработке движка Chrome JavaScript V8, которая позволяет разработчикам запускать язык JavaScript в местах, отличных от браузера, и предоставляет некоторые стандартные библиотеки, позволяющие запускать сценарии JavaScript. HTTP-служба. Такого рода вещи нельзя было сделать в браузере раньше.
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Этот код является примером кода, написанного на официальном сайте Node.js в 2010 году. Случайно меня сильно привлек такой простой код, хотя для его установки в то время все еще требовалось клонировать весь код проекта с GitHub на локальный сервер и запускать следующие команды последовательно:
$ ./configure
$ make
$ make install
На этот раз компиляция займет не менее десяти минут, но после завершения установки запустите приведенный выше фрагмент кода и откройте его в браузере.http://127.0.0.1:8124/ и потом посмотреть в браузереКогда вы говорите «Привет, мир», кажется, что дверь в новый мир открылась. Потому что единственной серверной программой, с которой я столкнулся в то время, был PHP, а PHP был, по сути, механизмом шаблонов, который не мог сам интуитивно обрабатывать запрос, а отвечал с помощью CGI. Возможность делать больше вещей очень заманчива для новичков, которые только что изучили программирование. Отсюда Node.js и npm начали стремительно развиваться на протяжении 10 лет. От разработки чисто серверных приложений до инструментов разработки, инженерных инструментов и современного метода разработки FaaS (функция как услуга, бессерверная). Node.js стал незаменимым навыком для веб-инженеров, независимо от того, используется ли он для разработки серверных приложений или приложений инструментального типа, или даже для использования Electron для разработки настольных приложений или разработки мобильных приложений с помощью React Native. Конечные инженеры понимают больше концепций системного уровня, таких как сеть, ввод-вывод, память, файловая система и т. д., многие из которых изначально не видны на стороне браузера. И изучение этих знаний очень ценно для вас, чтобы понять некоторые принципы, лежащие в основе фронтенд-разработки, точно так же, как алгоритмы обучения.Вывод: пожалуйста, изучите Node.js и некоторые основные принципы работы с компьютером.
возраст кадра
Когда я работаю над темами WordPress, большинство разработчиков тем делают некоторые простые эффекты во внешнем интерфейсе, а некоторые даже используют JavaScript для достижения некоторых вещей, которые можно сделать только через серверную часть, таких как списки статей, загрузка статей и рендеринг контента. В те дни разработчики этих тем в основном использовали jQuery для выполнения этих операций JavaScript, потому что чисто рукописный JavaScript был в то время очень громоздким (в эпоху ES4 многие нативные API, которые сейчас широко используются, все еще недоступны), поэтому jQuery был Первый выбор каждого.
С самого раннего PrototypeJS, более позднего jQuery и Backbone, которые вступили в эпоху MVC, AngularJS открыл режим MVVM, React представил концепцию FP, а Vue успешно открыл путь для прогрессивного опыта разработки. Куриные перья, спускающиеся по земле, подвергались критике со стороны разных людей за то, что в течение месяца разрабатывали новый фреймворк во фронтенде: «Я больше не могу учиться». Однако, как разработчику, который также написал фреймворки и библиотеки инструментов, мне нравится использовать пример, который часто используется в области пантехнологий, для сравнения области внешнего интерфейса:
Конечная цель технологий — сделать людей невидимыми для технологий.
эра jQuery, способ разработчиков интерфейса, использующих JavaScript, заключается в получении элементов DOM со страницы, добавлении событий, а затем динамическом изменении страницы с помощью класса и стиля, чтобы завершить реакцию на поведение пользователя;
Магистральная эпоха, шаблон MVC, первоначально использовавшийся в разработке программного обеспечения для настольных компьютеров, был введен в разработку переднего плана, и разработчики переднего плана обнаружили, что сложностью веб-разработки нужно управлять с помощью этих более зрелых шаблонов разработки;
Эпоха AngularJS, Отсюда Google переносит режим двусторонней привязки данных в интерфейсную разработку, превращая утомительную операцию управления элементами DOM через JavaScript в необходимость заботиться только о том, что нужно изменить на уровне модели. Vue, с другой стороны, снижает стоимость разработки этого режима до значительного уровня, позволяя многим начинающим разработчикам легко начать этот удобный режим разработки.
Эра реакции, ученые Facebook внедрили идею функционального программирования во фронтенд-разработку, сосредоточив внимание на отслеживаемости, отслеживаемости и управлении каналом данных, чтобы весь канал данных мог проходить как одна ссылка в максимально возможной степени.
Хотя о интерфейсе часто говорят, что это «новый фреймворк в месяц», на самом деле каждый фреймворк решает фактические потребности своих бизнес-сценариев в процессе итерации.Технические детали вносят существенные изменения.
В настоящее время я рекомендую изучать фреймворки React и Vue:
• Это также одна из самых популярных платформ в настоящее время, и ожидается, что она сможет удовлетворить потребности в поиске работы в ближайшие 3-5 лет;
• React: представляет концепцию функционального программирования (Functional Programming), делая идею написания кода более строгой, более удобной в сопровождении и логически управляемой;
• Vue: шаблон MVVM становится очень простым и удобным в использовании, а позиционирование Progressive JavaScript Framework хорошо отработано. И теперь Composition API Vue 3.0 в некоторой степени делает игровой процесс Hooks лучше, чем React Hooks;
Вывод: Пожалуйста, не бойтесь учиться! Не бойтесь новых технологий!
Инженерная дорога
Хотя я знакомился с фреймворками и Node.js, я обнаружил, что JavaScript может делать гораздо больше, чем просто показывать контент и отображать простые взаимодействия. Но по сути, он по-прежнему вращается вокруг нескольких страниц для управления элементами DOM на странице, и только когда я открыл несколько веб-сайтов Google, я обнаружил, что исходный веб-сайт можно назвать «приложением» в дополнение к странице. Поскольку Google запустил GMail, который может делать все без обновления страницы и имеет очень хороший опыт, мы обнаружили, что веб-страница может содержать такую сложную логику и сценарии приложений. Энтузиазм всех был чрезвычайно высок, и они задавались вопросом, смогут ли они сделать так, чтобы ответственный за них проект выглядел настолько мощным и продвинутым. Однако, поскольку проект продолжает оставаться сложным, масштабированием кода становится очень трудно управлять, и в настоящее время требуется внедрение технических средств.
инженерное сотрудничество
Для предприятий, помимо высокой эффективности НИОКР, не менее важны безопасность и соответствие требованиям НИОКР. Что такое соответствие требованиям безопасности? Управляемые версии кода, контролируемые процессы выпуска и управляемые механизмы оттенков серого — все это необходимые инструменты для крупных фабрик, обеспечивающие стабильный ход процесса проекта. Есть много новичков или студентов, не имеющих опыта работы в крупных компаниях, которые работают в одиночку при написании проектов, но более передовые проекты требуют как минимум 2-3 или даже больше людей для совместного участия в разработке. В настоящее время, поскольку уровень и привычки разработчиков несовместимы, и эти несоответствия напрямую влияют на общую эффективность НИОКР и ход проекта. Поэтому нужна модель, позволяющая каждому развиваться по горизонтальной линии, а инженерный спрос возникает по мере того, как того требует время.
• контроль версий
Git: GitHub, GitLab, Кодирование…
SVN: BitBucket, Google Code…
• Средство проверки стиля кода JavaScript/TypeScript: ESLint.
• инструменты тестирования
Модульное тестирование: карма, шутка, мокко…
Непрерывная интеграция: CI
• …
Инструменты инженерной разработки
От непосредственного использования тегов сценария для кода JavaScript до необходимости вводить файлы jQuery и основные файлы программы отдельно, до использования npm для управления библиотекой зависимостей и веб-пакета для упаковки и сжатия после появления Node.js. Разработка инженерных инструментов является свидетелем истории развития фронтенд-инжиниринга на протяжении почти десяти лет. Лучшее понимание и применение инженерных инструментов, которые мы обычно используем, безусловно, является незаменимым шагом на пути к совершенству.
• Инструменты управления пакетами зависимостей: npm, yarn
• Инструменты упаковки: webpack, rollup
• Инструмент скаффолдинга: создать-реагировать-приложение…
язык инженерной разработки
Я полагаю, что многие студенты слышали о некоторых анекдотах из первых дней JavaScript, например, о том, что в нем не так много строгого мышления или что оно очень неясно во многих сценариях, таких как неявные преобразования. Некоторые люди думают, что развитие JavaScript до его нынешнего состояния связано с его «гибкостью» или «расшатанностью», хотя это действительно косвенно вызвано относительно низким порогом обучения JavaScript, вызванным этой особенностью. Но как я уже сказал выше, когда масштаб проекта и численность персонала будут продолжать расти и даже расширяться, эти характеристики постепенно будут показывать очень плохой опыт:
- Из-за отсутствия хорошей технической документации между командами асимметрия информации напрямую приводит к логическим конфликтам в коде без хороших модульных тестов;
- API сторонней зависимой библиотеки использует множество свободных функций JavaScript в дизайне, из-за чего пользователь часто выглядит «запутанным» при обращении;
- Когда необходимо использовать JavaScript для взаимодействия с другими языками (особенно языками со строгой типизацией), непривычная привычка к JS сильно запутает контрагента, а фактическая стоимость доступа для обеих сторон будет намного больше, чем предыдущая оценка; Чтобы решить эту ситуацию, большие коровы из разных областей программирования начали придумывать способы, поэтому родилось много «колес»:
• Факультет Java: Scala.js, ClojureScript
• Go-отдел: GopherJS
• Майкрософт: TypeScript
• Facebook: поток, причина
В настоящее время TypeScript повлиял на экологию разработки интерфейса и даже всей веб-сферы.Андерс Хейлсберг, отец TypeScript, создал Turbo Pascal, Delphi, C# и другие языки, которые играют важную роль во всей области. компьютерных наук, и TypeScript снова произвел потрясающие изменения:
• Введение строгой типизации позволяет нам при написании кода перейти от мышления, ориентированного на значение, к мышлению, ориентированному на тип;
• Введение строгой типизации может помочь инструментам разработки (IDE и т. д.) лучше предоставить разработчикам удобные возможности, такие как интеллектуальное завершение, определение типа, проверка во время компиляции и т. д.;
• TypeScript позволяет JavaScript лучше взаимодействовать с другими языками и даже преобразовывать их в них;
Разработанные общие компоненты
Когда спрос продолжает расти, «ленивые» инженеры будут абстрагировать часто используемый контент, например, от ExtJS, который был давным-давно, Bootstrap, выпущенный инженерами Twitter, до сегодняшнего Ant Design, Element UI и т. д., все это поможет нам завершить развитие некоторых общих возможностей страницы быстрее, лучше и стабильнее.
• Реакция: Ant Design, Fusion Design
• Vue: Element UI, iView, Ant Design Vue
логическая абстракция
По мере того, как мой опыт написания приложений на JavaScript продолжает расти, методы и сценарии, которые я пробую, становятся все более сложными. И когда логический код становится все более и более сложным, я также постепенно обнаруживаю новую проблему.Много раз логический код, который я пишу, похож, но некоторые детали не совпадают, и эти коды часто позже Высокие затраты на обслуживание. Это меня очень смущает.Как я могу сделать свой код менее громоздким для написания, не теряя правильной логики исходного кода? Это напоминает мне о фреймворках, которые я изучал раньше.Разве их принцип реализации не заключается в том, чтобы просто сжать логический код, который мы писали очень нудно, чтобы мы могли написать его более лаконично и интуитивно понятно?
Это код, написанный кандидатом в колледж, у которого я когда-то брал интервью, и предназначен для быстрого определения статуса различных баффов в автошахматах. Но очевидно, что такой код абсолютно не может существовать в реальной разработке:
- Логика кода слишком избыточна;
- После изменения общей логики суждения каждое из них необходимо поддерживать вручную;
- Отсутствие хорошей ремонтопригодности;
Поэтому я предлагаю, как сделать эти коды более «элегантными» и простыми в обслуживании.
export default {
beastBuff: (state) => {
let arr = [];
if (state.raceCount[0]['beast'] == 2 || state.raceCount[0]['beast'] == 3) {
console.log(`you got 2 beast`)
arr.push(state.racebuffdata[8])
} else if (state.raceCount[0]['beast'] == 4 || state.raceCount[0]['beast'] == 5) {
console.log(`you got 4 beast`)
arr.pop()
arr.push(state.racebuffdata[9])
} else if (state.raceCount[0]['beast'] == 6) {
console.log(`you got 6 beast`)
arr.pop()
arr.push(state.racebuffdata[10])
} else if (state.raceCount[0]['beast'] < 2 && arr.length == 1) {
arr.pop()
}
return arr;
},
caveclanBuff: (state) => {
let arr = [];
if (state.raceCount[1]['caveclan'] == 2 || state.raceCount[1]['caveclan'] == 3) {
console.log(`you got 2 caveclan`)
arr.push(state.racebuffdata[11])
} else if (state.raceCount[1]['caveclan'] == 4) {
console.log(`you got 4 caveclan`)
arr.pop()
arr.push(state.racebuffdata[12])
} else if (state.raceCount[1]['caveclan'] < 2 && arr.length == 1) {
arr.pop()
}
return arr;
},
demonBuff: (state) => {
let arr = [];
if (state.raceCount[2]['demon'] == 1) {
console.log(`you got 1 demon`)
arr.push(state.racebuffdata[5])
} else if (state.raceCount[2]['demon'] < 1 && arr.length == 1) {
arr.pop()
}
return arr;
}
// ...
}
Нетрудно обнаружить, что логика в этих функциях xxxBuff очень близка, но они также различаются. Итак, как этот код можно оптимизировать и абстрагировать? В то время я предложил TA пример кода:
const beastConfig = [
[2, [2, 3], 8],
[4, [4, 5], 9],
[6, [6], 10],
[2]
]
Каждое число в этом коде можно найти одно за другим в приведенной выше функции beastBuff, так как же повторно использовать их в логическом коде для достижения той же функции, что и исходный код?
Я также написал ему справочный ответ:
const generateBuff = (rate, configArr) => {
return state => {
const arr = []
for (const [ output, conditions, index ] of configArr) {
if (conditions && index) {
// Buff calculating
const isHit = conditions.some(condition => state.raceCount[0][race] == condition)
if (isHit) {
console.log(`you got ${output} ${race}`)
arr.pop()
arr.push(state.racebuffdata[index])
break
}
} else if (state.raceCount[0][race] < output && arr.length === 1) {
// Last condition
arr.pop()
}
}
return arr
}
}
export default {
beastBuff: generateBuff('beast', [
[2, [2, 3], 8],
[4, [4, 5], 9],
[6, [6], 10],
[2]
]),
caveclanBuff: generateBuff('caveclan', [
[2, [2, 3], 11],
[4, [4], 12],
[2]
]),
// ...
}
Логика суждения, реализованная жестким кодом в исходном коде, путем наблюдения общих точек и размышлений о том, можно ли преобразовать ее в абстрактные части, — это также способность, которой должен обладать отличный инженер.
Be D.R.Y.! (Don't repeat yourself)
навыки мышления на более высоком уровне
Благодаря моим непрерывным исследованиям и исследованиям различных предприятий, различных сценариев и различных сложностей с кодом, я обнаружил, что в области внешнего интерфейса и даже во всей области программирования одна за другой развиваются различные фреймворки и архитектуры.Найдите более подходящую передовую практику. Как упоминалось выше, разные авторы фреймворков будут использовать разные структуры кода и даже философию кода при разработке, и эти разные точки зрения могут не отражаться напрямую в исходном коде фреймворка. Но я бы не сказал, что изучение исходного кода совершенно бесполезно! Потому что изучение исходного кода может, по крайней мере, выучить некоторые приемы или привычки кода.
Но важнее понять мышление с точки зрения API и системной архитектуры, потому что, только больше думая, можно постепенно освоиться с другими технологиями, чем с другими.
EOF
Этот процесс не является строгим маршрутом обучения, а скорее подведением итогов моего личного опыта. Конечно, в дополнение к пунктам обучения, которые я упомянул, есть много разных ответвлений, соответствующих разным реальным бизнесам и сценариям, таким как разработка настольных приложений с помощью Electron, разработка мобильных приложений с помощью React Native/Flutter и работа с Node.js/QuickJS. /FibJS разрабатывает встроенные приложения, сотрудничает с TensorFlow.js для разработки приложений машинного обучения, подходящих для интерфейсных и даже периферийных вычислений, сотрудничает с WebAssembly для улучшения работы веб-приложений до уровня, близкого к нативным приложениям...
Существует известное пророчество о JavaScript: Все, что можно переписать на JavaScript, в конечном итоге будет переписано на JavaScript. Независимо от того, будет ли это предложение реализовано полностью или нет, мы уже видим, что многие приложения постепенно превращаются в веб-приложения, такие как Photoshop, программное обеспечение для редактирования аудио и видео, редакторы кода и даже масштабные игры. может работать в браузере. Сложно ли фронтенд-разработка? Это несложно, и порог относительно низок. Это просто? Это не просто, и вы уже испытали это, поверив, что видели это здесь. Конечно, как выбрать маршрут и направление на самом деле зависит от вашего собственного опыта и возможностей.
Наймите магов! !
Команда по взаимодействию и строительству технологического отдела Департамента Дао набирает мелких партнеров для создания инвестиционной платформы для продавцов уровня 10 000 и потребителей уровня 100 млн. Если вас интересуют технологии и сценарии, такие как технологии среднего и визуальное построение или хотите узнать больше о Тао. Если так много маркетинговых страниц в приложении создается быстро, добро пожаловать, отправляйте свое резюме по адресу xiaowen.gcy@alibaba-inc.com, а код подключения — это новичок.