Фреймворки JavaScript: путь обучения помогает мне выжить

Оглядываясь назад в 2011 году, когда я присоединился к Drcom Health Group, я начал бороться с JavaScript. Я не знал, с чего начать изучение или отладку, JavaScript для меня — черный ящик. Несмотря на то, что вокруг меня было много опытных парней, они не могли меня каждый раз прикрывать. Единственный способ спасти мою жизнь — это глубоко погрузиться в JavaScript.

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

Четырехэтапный процесс освоения JavaScript:

1. Изучение синтаксиса JS

2. Освоение шаблонов проектирования JavaScript

3. Понимание философии Framework

4. Использование IDE, тестирование, инструмент разработки Chrome, автоматизированный инструмент

Шаг 1. Изучение синтаксиса JS

Благодаря Yusheng, он собрал весь синтаксис программирования JavaScript в один всеобъемлющий образ. Это дало мне представление о том, из чего сделан JavaScript.

Вышеупомянутая карта разума охватывает только ES5, потренируйтесь с ними в онлайн-редакторах (jsbin, liveweave…), чтобы увидеть, как они работают на самом деле.

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

2. Освоение дизайна JavaScriptшаблон

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

«Шаблоны проектирования — это передовые объектно-ориентированные решения часто встречающихся программных проблем. Шаблоны — это повторно используемые дизайны и взаимодействия объектов. Каждый паттерн имеет название и становится частью словарного запаса при обсуждении сложных дизайнерских решений».

«Шаблоны проектирования также предоставляют нам общий словарь для описания решений. Это может быть значительно проще, чем описание синтаксиса и семантики, когда мы пытаемся передать другим способ структурирования решения в виде кода. “ Эдди Османи

Шаблоны помогают нам опираться на объединенный опыт многих разработчиков, которые работали до нас, и гарантируют, что мы структурируем наш код оптимизированным образом, отвечающим потребностям проблем, которые мы пытаемся решить. Этот шаг закладывает основу для легкого понимания фреймворков (на следующем этапе).

Моя любимая книга в этой части: Изучение шаблонов проектирования JavaScript

3. Понимание философии Framework

Вы можете заметить одну вещь: преобразование приложения в веб-версию является тенденцией. Поэтому появлялось все больше и больше фреймворков, отвечающих этой тенденции. Вы можете создавать веб-сайты с помощью Angular, React,..; собрать сервер с NodeJs, Express, Meteor; создавать мобильные устройства с помощью Ionic, React Native, NativeScript; создать настольное приложение с помощью Electron, NW; построить робота с Johnny-Five, Cylon... Не будет преувеличением сказать, что JavaScript может все.

Вопрос к вам: «Сможете ли вы освоить все эти фреймворки?». Я уверен, что вы не можете. Я тоже. Вам не нужно этого делать. По сути, все JS-фреймворки очень похожи друг на друга. Если у вас есть мастер-синтаксис и шаблоны, изучение нового не займет у вас много времени. Короче говоря, я кратко излагаю их в выражении:

Шаблон + философия = основа

Например, я не стесняюсь признаться, что мне потребовалось больше года, чтобы понять принципы Angular2, в то время я понятия не имел, что такое шаблон, я был настолько неправ, что пытался воспроизвести уроки и попытаться запомнить. Меня это никуда не привело.

Нет короткого пути для преодоления этого шага, единственный путь — запачкать руки. Определенно, вы столкнетесь лицом к лицу со многими странными ошибками. Однако вы не одиноки: с полезным линтером IDE, инструментом разработки Chrome, средой тестирования, инструментами автоматизированного рабочего процесса день за днем ​​все будет работать более гладко.

Есть ли у вас какие-либо советы, как ускорить обучение? Оставьте мне комментарий или поблагодарите меня в Твиттере!

….ПРОДОЛЖЕНИЕ…..