Рубрики
Без рубрики

План изучения для вылечения усталости JavaScript

Sacha Greif Учащийся план, чтобы вылечить JavaScript Tatiguelike всех остальных, я недавно наткнулся на почту Хосе Агинаги «Как оно чувствует для изучения JavaScript в 2016 году». Понятно, что этот пост попал в нервы: я видел, как он достигает верхнего пятна на новость хакера не раз, но

Автор оригинала: FreeCodeCamp Community Member.

Sacha Greif.

Как и все остальные, я недавно столкнулся с постом Хосе Агинаги « Как оно чувствует себя изучать JavaScript в 2016 году ».

Ясно, что этот пост попал в нервы: я видел, как он достигает верхнего места на Хакеров Новости не один раз, но дважды. Это был самый популярный пост на /r/javascript А также в прямом эфире сейчас он имеет более 10 тысяч лайков на среднем – что, вероятно, больше, чем все мои собственные сообщения, собранные вместе. Но кто считает?

Это не пришло как удивительно: я уже давно знал, что экосистема JavaScript может быть запутана. На самом деле, сам по причине, почему я бегал Состояние JavaScript Опрос должен был выяснить, какие библиотеки были на самом деле популярны и, наконец, сортируют сигнал от шума.

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

Это кому

Этот план изучения для вас, если:

  • Вы уже знакомы с основными концепциями программирования, такие как переменные и функции.
  • Возможно, вы уже сделали входную работу с такими языками, как PHP и Python, и, возможно, используются интерфейсные библиотеки, такие как jQuery для нескольких простых хаков.
  • Теперь вы хотите попасть в более серьезную предельное развитие, но утонув в рамках и библиотеках, прежде чем даже начать.

Вещи, которые мы прикрым

  • Как выглядит современное веб-приложение JavaScript
  • Почему вы не можете просто использовать jQuery
  • Почему реагировать самый безопасный выбор
  • Почему вам может не нужно «учиться JavaScript правильно»
  • Как узнать синтаксис ES6
  • Почему и как узнать redux
  • Какой график и почему это большое дело
  • Куда идти дальше

Ресурсы упомянуты здесь

Отказ от ответственности: Этот пост будет включать несколько партнерских ссылок на курсы WES BOS , но материал рекомендуется, потому что я искренне думаю, что это хорошо, а не только из-за аффилированной схемы.

Если вы предпочтете найти другие ресурсы, Mark Erikson поддерживает отличный список Реагирование, ES6 и Redux Ссылки.

JavaScript VS JavaScript

Прежде чем мы начнем, нам нужно убедиться, что мы говорим о том же. Если вы Google «Узнайте JavaScript» или «План исследования JavaScript», вы найдете тонну ресурсов, которые учат вам, как узнать JavaScript Язык Отказ

Но это на самом деле Легко часть. Хотя вы определенно можете углубиться глубоко и изучать тонкости языка, правда – это большинство веб-приложений, используемых относительно простым кодом. Другими словами, 80% того, что вам когда-либо нужно будет написать веб-приложения, обычно охватывается в первых нескольких главах вашей типичной книги JavaScript.

Нет, тяжелая проблема осваивает JavaScript Экосистема , с его бесчисленными конкурирующими каркасами и библиотеками. Хорошая новость заключается в том, что именно этот план изучения посвящен.

Строительные блоки приложений JavaScript

Чтобы понять, почему современные приложения JavaScript кажутся настолько сложными, вы сначала должны понять, как они работают.

Для начала, давайте посмотрим на «традиционное» веб-приложение CIRCA 2008:

  1. База данных отправляет данные на ваш Back-End (например, приложение PHP или Rails).
  2. Задний конец читает, что данные и выходные данные HTML.
  3. HTML отправляется в браузер, который отображает его как DOM (в основном, веб-страницы)

Теперь многие из этих приложений также посыпали в каком-то коде JavaScript на клиенте, чтобы добавить интерактивность, такую как вкладки и модальные окна. Но принципиально браузер все еще получил HTML и отправиться оттуда.

Теперь сравните это с помощью «Современного» веб-приложения 2016 года (также известное как «Приложение« Одиночное страница »):

Обратите внимание на разницу? Вместо отправки HTML-сервера теперь отправляет данные И этап преобразования «Данные в HTML» происходит на клиенте вместо этого (именно поэтому вы также отправляете в код, который сообщает клиенту, как выполнить указанное преобразование).

Это имеет много последствий. Во-первых, хорошее:

  • Для заданного значения содержимого отправка только данные быстрее, чем отправка целых страниц HTML.
  • Клиент может мгновенно поменяться в контентах без необходимости обновления окна браузера (при этом термин «приложение для одного страницы»).

Плохо:

  • Начальная нагрузка занимает дольше, поскольку «данные в HTML» кодовая база может расти довольно большими.
  • Теперь вам нужно место для хранения и управления данными на клиенте, если вы хотите кэшировать его или осмотреть его.

И уродливый:

  • Поздравляем – теперь вы должны иметь дело с стеком на стороне клиента, что может получить так же сложно, как ваш стек на стороне сервера.

Спектр клиент-сервер

Так зачем пройти все эти проблемы, если есть так много нисходящих? Почему бы просто не прилипать к старым добрым добрым PHP приложениями старого?

Ну, представьте, что вы строите калькулятор. Если пользователь хочет знать, что 2 + 2 – это, не имеет смысла проходить весь путь к серверу, чтобы выполнить операцию, когда браузер идеально способен это сделать.

С другой стороны, если вы строите чисто статический сайт, такой как блог, это совершенно нормально, чтобы генерировать окончательный HTML на сервере и сделать с ним.

Правда в том, что большинство веб-приложений опускаются где-то в середине спектра. Проблема знает, где.

Но ключевое дело в том, что Спектрум не является непрерывным : Вы не можете начать с помощью чистого приложения для сервера и медленно перемещаться в сторону приложения для чистого клиента. В какой-то момент (разрыв) вы будете вынуждены остановиться и воссоздать все, или иначе в конечном итоге с беспорядком неодавленного кода спагетти.

Вот почему вы не должны «просто использовать jQuery» для всего. Вы можете придумать jQuery, как лента в воздуховоде. Это удивительно удобно для небольших исправлений вокруг дома, но если вы продолжаете добавлять все больше, и больше начнет выглядеть уродливым.

С другой стороны, современные JavaScript Frameworks больше похожи на 3D-печатную замену: требуется больше времени, но результат – это намного чище и крепко.

Другими словами, овладение современным стеком JavaScript – это ставка, которую независимо от того, где они начинаются, большинство веб-приложений будут наверное в конечном итоге на правой стороне деления рано или поздно. Так что да, это больше работы, но лучше безопасно, чем извините.

Неделя 0: Основы JavaScript

Если у вас нет чистого заканчивающегося разработчика, вы, вероятно, знаете некоторые JavaScript. И даже если вы этого не сделаете, C-подобный синтаксис JavaScript будет выглядеть несколько знакомым, если вы разработчик PHP или Java.

Но если JavaScript является полной тайной для вас, не отчаивайтесь. Существует много бесплатных ресурсов, которые быстро приведут вас к скорости. Например, хорошее место для начала Уроки JavaScript кодекадемы Отказ

Неделя 1: начать с реагирования

Теперь, когда вы знаете базовый синтаксис JavaScript, и что вы понимаете, почему javaScript Apps может появиться настолько сложным, давайте поговорим о специфике. Где вы должны начать?

Я верю, что ответ – Реагировать Отказ

React – это библиотека пользовательского интерфейса, созданная и открытая в Facebook. Другими словами, это заботится о том, чтобы «данные в HTML» шаг (уровень просмотра).

Теперь не поймите меня неправильно: я не говорю вам, чтобы выбрать реагировать, потому что это Лучший библиотека там (потому что это очень субъективно), но потому что это Довольно хорошо Отказ

  • Реагировать не может быть Большинство Популярная библиотека, но это Красивая популярный.
  • Реагировать не может быть Большинство Легкая библиотека, но это Красивая Легкий.
  • Реагировать не может быть Простые учиться, но это Красивая легко учить.
  • Реагировать не может быть Большинство Элегантная библиотека, но это Красивая элегантный

Другими словами, реагирование не может быть Лучший Выбор в любой ситуации, но я верю, что это Самый безопасный Отказ И поверьте мне: «Только когда вы начинаете», – это не правильное время, чтобы рисковать с вашим технологическим выбором.

Реагировать также познакомим вас с некоторыми полезными понятиями, такими как компоненты, состояние приложения и функции бездействия, которые докажены полезными, независимо от того, какие рамки или библиотеки, которые вы в конечном итоге используете во время своей карьеры.

Наконец, React имеет большую экосистему других пакетов и библиотек, которые хорошо работают с ним. И его прозрачная популярность означает, что вы сможете найти много помощи на таких сайтах, как стек переполнения.

Я лично рекомендую Реагировать для начинающих Курс WES BOS. Это то, как я научился реагировать на себя, и это просто было полностью пересмотрено с последними лучшими практиками реагирования.

Если вы «изучите JavaScript правильно» в первую очередь?

Если вы очень методический учащийся, вы можете получить хороший понять основы JavaScript, прежде чем делать что-либо еще.

Но для других, это похоже на участие в курсе, изучая анатомию человека и динамику жидкости. Конечно, они оба играют огромную роль в плавании, но более весело просто прыгать в бассейн!

Здесь нет правильного или неправильного ответа, все зависит от вашего стиля обучения. Истина в том, что большинство основных учебных пособий по реагированию, вероятно, используют только крошечное подмножество JavaScript в любом случае, поэтому совершенно хорошо, чтобы сосредоточиться на том, что вам нужно сейчас и оставить остальные на потом.

Это также относится к экосистеме JavaScript в целом. Не беспокойтесь о том, чтобы понять Ins и ауты, таких как WebPack или Babel сейчас. На самом деле реагировать недавно вышло со своим маленьким Утилита командной строки Это позволяет создавать приложения без конфигурации сборки.

Неделя 2: ваш первый реагированный проект

Давайте предположим, что вы только что завершили курс реагирования. Если вы похожи на меня, две вещи, вероятно, верны:

  • Вы уже забыли половину того, что вы только что узнали.
  • Вы не можете дождаться, чтобы положить половину ты сделать помните на практике.

Я верю, что лучший способ выучить рамки или язык, чтобы просто использовать его. И личные проекты – идеальный повод, чтобы попробовать новые технологии.

Персональный проект может быть чем угодно с одной страницы в комплексном веб-приложении, но я чувствую, что переработано, ваш собственный персональный сайт может быть хорошей средней почвой. Кроме того, я знаю, что вы, вероятно, выложили его в течение многих лет!

Теперь я сказал ранее, что использование одностраничных приложений для статического контента часто было переплетением, но реагирует на самом деле имеет секретное оружие: GATSBY Реагический генератор статического сайта, который позволяет «обмануть» и получать все преимущества реагирования без каких-либо нисходящих.

Вот почему GATSBY – отличный способ начать работу с React:

  • Предварительно настроенший веб-папак, означающий, что вы получаете все преимущества без каких-либо головных болей.
  • Автоматическая маршрутизация на основе вашей структуры каталога.
  • Все HTML содержимое также сгенерировано на стороне серверов, поэтому вы получаете лучшее из обоих миров.
  • Статический контент означает отсутствие сервера и супер легко хостинг на Страницы GitHub Отказ

Я использовал GATSBY для Состояние JavaScript Сайт, а не беспокоиться о маршрутизации, строить конфигурацию инструмента, или на стороне сервера, рендеринга, сохранив мне тонну времени.

Неделя 3: Овладение ES6

В моем собственном стремлении учиться реагировать, я вскоре достиг такой точки, где я мог бы получить с помощью образцов копирования кода, но все еще было много, я не понял.

В частности, я был незнакома со всеми новыми функциями, представленными ES6 , такой как:

  • Функции стрелки
  • Разрушение объекта
  • Классы
  • Оператор распространения

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

Или если вы предпочитаете бесплатные ресурсы, проверьте Книга Николас Беваки, практическая ES6 Отказ

Хорошее упражнение для освоения ES6 проходит через более старую кодовую базу (например, тот, который вы только что создали в неделю 2!) И преобразовывая свой код на более короткий синтаксис Terser Syntax.

Неделя 4: принимая государственное управление

В этот момент вы должны быть способны построить простой реактивный фронт, поддерживаемый статическим содержанием.

Но реальные веб-приложения не являются статическими: им нужно где-то получить данные где-то, вообще базу данных какой-то.

Теперь вы могли бы просто отправить данные на ваши отдельные компоненты, но это быстро становится грязным. Например, что, если два компонента должны отображать одинаковую часть данных? Или нужно поговорить друг с другом?

Это где Государственное управление входит. Вместо того, чтобы хранить ваше состояние (другими словами, ваши данные) бит бит в каждом компонент, вы храните его в одном Глобальный магазин Тогда затем отправляют его к вашим компонентам реагирования:

В реагированном мире самая популярная государственная библиотека управления является Redux. Redux не только помогает централизовать ваши данные, но также обеспечивает некоторые строгие протоколы для манипулирования этими данными.

Вы можете подумать о Redux в качестве банка: вы не можете пойти в локальную ветку и вручную изменить сообщенность вашей учетной записи («здесь, позвольте мне просто добавить пару дополнительные нули!»). Вместо этого вы заполняете форму депозита, затем предоставьте его банковскому кассиру, уполномоченным выполнять действие.

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

Результатом всей этой дополнительной работы является высоко стандартизированным и ремонстрируемым потоком данных по всему вашему приложению, а доступ к таким инструментам, как Redux devtools Чтобы помочь вам визуализировать это:

Еще раз вы можете остаться с нашим другом WES и узнать Redux с его курс redux , что на самом деле совершенно бесплатно!

Или вы можете проверить создатель Редукс Дэна Абрамова видео серии на egghead.io , который также бесплатный.

Бонусная неделя 5: API на строительстве с GraphQL

До сих пор мы почти поговорили о клиенте, и это только половина уравнения. И даже не входя в целый узел экосистемы, важно решить один ключевой аспект любого веб-приложения: как данные попадают с сервера на клиент.

Это не придет как удивленно, что это тоже быстро меняется, с Graphql (Еще еще один проект с открытым исходным кодом Facebook) возникает серьезной альтернативой традиционным API.

В то время как API отдыха обнажает несколько маршрутов отдыха, которые каждый даст вам доступ к предопределенному набору данных (See,/API/посты/API/комментарии и т. Д.), GraphQL выставляет одну конечную точку, которая позволяет клиенту Запрос для данных, которые ему нужны Отказ

Подумайте об этом как о том, чтобы сделать несколько поездок в магазин мясника, пекарни и продуктовый магазин, по сравнению с тому, что кто-то список покупок и отправив их на протяжении всех трех.

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

GraphQL забирал пару за прошедший год или около того, со многими проектами (такими GATSBY , который мы использовали в неделю 2) планируют принять его.

Сам график – это просто протокол, но теперь его лучшая реализация, вероятно, является Аполлон Библиотека, которая хорошо работает с Redux. Есть еще отсутствие учебных материалов вокруг Graphql и Apollo, но, надеюсь, Документация Apollo может помочь вам начать.

За пределами реагирования

Я рекомендовал вам начать с экосистемы RACT ECOSYSTEM, потому что это безопасный выбор, но это ни в коем случае не является единственным действительным интерфейсным стеком. Если вы хотите продолжать изучать, вот две рекомендации:

Вариант

Vue является относительно новой библиотекой, но она растет на скоростях записи и уже принята крупными компаниями, особенно в Китае, где он используется подобным Baidu и Alibaba (думаю, что китайский Google и Chiry Amazon). И это также официальный передний слой PHP Framework Larave Отказ

По сравнению с реагированием некоторые из его ключевых точек продажи:

  • Официально поддерживаемая маршрутизация и государственные библиотеки управления.
  • Сосредоточиться на производительности.
  • Нижняя кривая обучения благодаря использованию шаблонов на основе HTML.
  • Меньше кода котельной.

Когда он стоит, два главных вещей, которые все еще дают реагировать на краю по Vue, – это размер экосистемы реагирования, а Реагировать родной (Подробнее по этому позже). Но я не был бы удивлен, увидев Vue догнать скоро!

Эльма

Если Vue является более доступным вариантом, Elm это скорее передовые. ELM – это не просто рамка, а весь новый язык, который компилирует вниз к JavaScript.

Это приносит несколько преимуществ, таких как улучшенная производительность, насильственная семантическая версия и без исключения времени выполнения.

Я не пробовал вяз лично, но это было тепло, рекомендованное друзьями, и пользователи ELM, как правило, кажутся очень довольны этим (как показано, что его 84% рейтинга удовлетворенности в состоянии опроса JavaScript).

Следующие шаги

К настоящему времени вы должны иметь довольно хорошее понимание всей перспективной стеки реагирования, и, надеюсь, будет достаточно продуктивным с ним.

Это не значит, что вы сделали, хотя! Это только начало вашего путешествия через экосистему JavaScript. Некоторые другие темы, которые вы в конечном итоге вступите в включение:

Я не могу покрыть все это здесь, но не отчаиваться! Первый шаг всегда самый жесткий, и угадать, что: Вы только что взяли его, прочитав этот план обучения.

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

Поддерживать связь

Вы нашли этот план обучения полезным? Какой район JavaScript вы бы хотели, чтобы я написал о следующем? Оставьте комментарий или Tweet Чтобы дать мне знать!

И если вы хотите знать в следующий раз, я опубликую сообщение, вы также можете Зарегистрируйтесь в состояние списка рассылки JavaScript Отказ

Читайте ещё по теме: