в какой последовательности изучать JavaScript
Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расскажем, как изучать JavaScript, и предоставим полезные ссылки.
JavaScript (JS) – нативный язык, база, а библиотеки и JavaScript фреймворки – все то, что уже «накладывается» сверху. Язык программирования JavaScript клиентский и выполняется на стороне браузера. Грубо говоря, вся нагрузка ложится именно на ПК пользователя, а не на сервер, как было бы в случае с PHP. Поэтому кривой скрипт также будет затрагивать напрямую клиента, а не сервер: хорошо для вас, да плохо для пользователя.
Подробнее о том, что такое JavaScript, вы сможете узнать из данного видео:
Не упускайте из виду JavaScript фреймворки, библиотеки и прочие инструменты.
- jQuery – дополнительная библиотека, способная облегчить работу с XHR-запросами и селекторами.
- Node.js представляет собой серверную вариацию JS.
- Webpack заменяет собой и Gulp, и многие другие инструменты. Это сборщик модулей, который позволяет собрать все js-файлы в необходимое кол-во пакетов, а также убедиться в правильности порядка собранных файлов.
- Angular/Vue/React. Не нужно вестись на хайповые статьи вроде «Angular vs React». Хватит одного инструмента из трех перечисленных. Остальные – по мере необходимости.
Теперь давайте условимся: идеальной последовательности не существует. Все напрямую зависит от того, чем вы занимаетесь и на что ориентированы: фронтенд или full-stack. Если первое, делайте меньший упор на взаимодействие с серверной частью, а если второе – напротив. Изучать JavaScript вы можете и по своему плану. Наш – лишь одна из возможных вариаций, которая, тем не менее, имеет право на существование.
1. JavaScript основы
Книги по JavaScript для начинающих и аналогичные видеоуроки, которые разбудят в вас веб-разработчика. Массивы, коллекции, строки и прочий базис обязательны к изучению на старте. Список литературы солидный, поэтому в первую очередь загляните сюда:
И еще много чего интересного в нашей статье 16 бесплатных книг по JavaScript.
2. jQuery
Рекомендуем ознакомиться с серией видео «Уроки jQuery» от Web Developer Blog. Вы узнаете все о jQuery, начиная синтаксисом и заканчивая практической реализацией того, что может потребоваться.
3. JavaScript: углубленное изучение
Начинаем изучать JavaScript более серьезно.
В этом поможет неплохой видеокурс от loftblog под названием «Продвинутый JavaScript»:
4. Node.js
И вот мы переходим к самому «вкусному». В сети немало материалов по Node.js, но мы предлагаем сперва ознакомиться с нашими статьями:
- Руководство для начинающих в Node.js
- Подборка бесплатных ресурсов для изучения Node.js
Далее посмотрите серию уроков Node.js от ITVDN:
Ребята излагают материал максимально доступно, так что никто не уйдет «обиженным» 😉
Менеджер пакетов, который входит в Node.js. Нужен, важен и нередко украшает требования вакансий. У Дмитрия Лаврика есть хорошее видео, разбирающее по косточкам npm в рамках основ:
Захотите узнать больше – обязательно найдете на его канале дополнительные видео, посвященные данному менеджеру.
6. Gulp
Исчерпывающий ответ на вопрос «Что это такое» дает Современный учебник JavaScript: Скринкаст по Gulp. Все выпуски скринкаста собраны в одном месте, что безумно удобно.
7. Webpack
За основой по Webpack вам на канал WebForMySelf:
Дополнительная информация по этому инструменту. Плохо с английским? Не вопрос: переведенный вариант.
8. Angular/Vue/React
Выше уже упоминалось, что можно выбрать что-то одно, но все зависит от конкретного проекта и соответствующих требований к нему. Хоть Vue.js сейчас по обсуждениям впереди планеты всей, затронем каждый из трех инструментов.
Angular курс
Vue.js
Знакомство с React
Надеемся, вам помог наш лайфхак. Если же вы знаете более эффективный способ изучить JS – поделитесь в комментариях 🙂
Изучение JavaScript с нуля
Рассказ программиста о том, как добиться успехов в изучении JavaScript.
JavaScript – язык, на котором сегодня работает всё – от веб-приложений до мобильных приложений и серверов. Его популярность резко выросла за последние несколько лет, обойдя такие языки, как Java и PHP. Сейчас – наилучшее время для изучения JavaScript. Я расскажу, с чего началась моя история, что я изучил и как стать профессионалом в JavaScript.
Предыстория
JavaScript был создан Бренданом Эйхом в 1995 году. Брендан был принят в компанию Netscape Communication, задачей которой было сделать веб более динамичным. Через 10 дней, Брендан создал прототип языка, с синтаксисом, очень похожим на Java. Это был день рождения JavaScript.
В 1996, JavaScript был передан ECMA (Европейская ассоциация производителей компьютеров), чтобы зарегистрировать новый стандарт языка. Это привело к официальному выпуску ECMA-262. Несмотря на то, что JavaScript употребляется чаще, официальное название стандарта – ECMAScript.
Сегодня каждый браузер поддерживает его, тем самым делая JavaScript языком веба.
Некоторые разработчики ненавидят JavaScript за то, что он интерпретирует код таким образом, что в итоге вы получаете совсем не то, что программировали. Написав первые несколько строк на JavaScript, я был удивлён этим фактом. Тем не менее я твёрдо решил, что займусь его изучением.
Первые шаги
После моего первого знакомства с JavaScript, я решил составить план изучения языка:
1. Научиться учиться и запоминать простые вещи
2. Изучить основы JavaScript
3. Погрузиться в изучение и приступить к изучению расширенных возможностей языка.
4. Начать создание своих проектов.
5. Завести блог об изучении JavaScript
6. Научить других
Этот план я называю никогданекончающимся, что несложно заметить, взглянув на него. Я буду выполнять пункт за пунктом, но сначала я хотел бы вас предостеречь. Прежде чем приступить к изучению, вы должны понимать, что путь тернист. В какой-то момент вы придёте в отчаяние, главное не поддаваться ему, а продолжать работать. С этим сталкивались все, даже профессионалы. Эту часть обучения, нужно принять как должную.
Прежде чем приступить к изучению, вы должны понимать, что путь тернист. В какой-то момент вы придёте в отчаяние, главное не поддаваться ему, а продолжать работать.
Учитесь учиться
Очень часто многие умалчивают, что способность учиться самостоятельно, то есть заниматься самообразованием, тоже нужно развивать. План является основой самообразования. В IT всё меняется настолько быстро, что чтобы оставаться успешным нужно постоянно развиваться. Ниже я привёл несколько идей, как это осуществить.
Написание технических текстов как способ обучения
В процессе обучения я записывал все свои достижения. Сделать это можно создав блог или любым другим удобным для вас способом. Если же публиковать свои достижения вы не считаете нужным, ведите записи на своём ПК. Результаты будут видны практически сразу, кроме того, способ помогает тренировать память. Это способствует пониманию пройденного.
Тесты на знание
Этот способ является одним из наиболее быстрых. Несмотря на то, что зачастую многие выступают против тестов, как способа проверки знаний, это действительно помогает в самообразовании.
Лучшим способом является использование карточек. Я использую Anki. В приложении можно создавать карточки по каждой пройденной теме. Выполнять тесты желательно регулярно, поэтому каждое утро я посвящаю 10-15 минут на их выполнение. Это помогает не только развивать память, но и запоминать, как правильно задавать вопросы.
Не торопитесь
Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя. Сделайте перерыв на несколько дней, когда будете готовы продолжайте обучение. Кроме того, я настоятельно рекомендую использовать метод помидора. Суть в том, чтобы 25 минут заниматься, и 5 минут отдыхать. Этот способ помогает повысить продуктивность.
Найдите ментора
Найдите того, кто хорошо знает JavaScript и будет готов помочь вам, если у вас возникают проблемы. Помощь ментора поможет вам не потерять мотивацию.
Основы JavaScript
Теперь, когда мы познакомились с наиболее эффективными способами обучения пришло время перейти к самому обучению. Всё надо начинать с основ. Благодаря популярности JavaScript, найти информацию в интернете не составит труда. Я поделюсь ресурсами, где я сам обучался. Вы можете выбрать любой из них:
MDN’s JavaScript Guide — руководство охватывает всё необходимое, грамматику и типы, циклы, функции, выражения, числа и даты, форматирование и многое другое.
You Don’t Know JS — это серия книг Кайла Симпсона. Здесь содержится информация, которая поможет вам изучить язык более глубоко.
Eloquent JavaScript — ещё одна крутая книга о JavaScript. Советую читать её, только после того, как вы получите базовые знания или если у вас есть опыт программирования на других языках.
Free Code Camp — сообщество программистов, где вы будете участвовать в чемпионатах, создавать проекты и получать сертификаты. Способ подойдёт даже новичку, кроме того его можно совмещать с занятиями на других ресурсах.
CodeCademy — ещё одна платформа для обучения с помощью задач. Идеально для новичка.
В процессе обучения на этих ресурсах вы получите базовые знания, необходимые для программирования на JavaScript, после чего вы можете смело приступать к созданию своих первых программ и приложений. Когда вы почувствуете, что уже что-то понимаете, у вас появится мотивация для продолжения изучения JavaScript и любых других языков. Главное – не лениться.
Если вы чувствуете, что не можете самостоятельно справиться с проблемой, погуглите, обратитесь на форум Stack Overflow или просто спросите у ваших знакомых программистов. Всегда спрашивайте себя, для чего вы делаете что-то – «Для чего мне нужны циклы, когда проще использовать метод карт?», «Зачем мне JQuery, если можно обойтись без него?».
«Я знаю основы, что дальше?»
Вы достигли успехов, знаете язык на хорошем уровне, но что теперь? Такой же вопрос я задал себе, когда понял, что знаю достаточно, но хочу продолжить изучение. В какой-то момент вы заметите, что большую часть времени у вас занимает поиск ошибок в коде. Когда люди сталкиваются с этим, они стоят перед выбором, продолжить углубленное изучение, или остаться с теми знаниями, что у них есть.
Справиться со стрессом мне помогла моя сила воли. Я понимал, что это поможет мне перейти на новый уровень.
Изучение новых вещей становится затруднительным, так как материал уже не такой лёгкий как прежде, но всё еще не настолько тяжёлый, чтобы бросать дело. Я занялся тестирования, шаблонов проектирования, структур JavaScript с помощью книг. Не все из тех книг, что я прочёл, помогли мне. Здесь я приведу список тех, что действительно оказались полезными:
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript — в книге описываются 68 подходов для написания кода, к каждому автор приводит примеры. Вы узнаете, как подбирать стиль программирования для разных проектов, решать проблемы и многие другие аспекты программирования.
JavaScript — The Good Parts — несмотря на то, что книга порядком устарела, она всё ещё является отличным помощником. Книга научит вас писать красивый и эффективный код.
JavaScript Design Patters — в книге рассказывается о том, как применять современные шаблоны к языку. Написано всё простым языком.
Test-Driven JavaScript Development — одна из лучших книг, обучающих тестированию кода JavaScript.
Путь к профессии
Несмотря на то, что книги дают значительный объем знаний, нужно уметь применять их на практике.
Человека нельзя назвать кузнецом своего дела, если он знает всё, но ничего не умеет. То же самое с программированием. Если вы не практикуетесь, вы ничего не получите. Так что мой совет – учитесь и практикуйтесь одновременно. Не стоит волноваться по поводу того, что ваш код не будет идеальным. Главное – практика. Создайте аккаунт на GitHub, пишите код ежедневно, сделайте это одним из пунктов распорядка дня. Когда вы создадите свой проект, поделитесь с сообществом и ждите отзывов. Обратная связь, особенно если это мнение аргументированно, дорогого стоит. В процессе работы над проектом, вы приобретёте навыки, которые помогут вам не только в программировании, но и в других делах.
Человека нельзя назвать кузнецом своего дела, если он знает всё, но ничего не умеет.
Если у вас есть шанс посетить мастер-класс, конференцию или любой другое мероприятие, посвящённое JavaScript, не упускайте его! Подобные встречи мотивируют. Вы познакомитесь с такими же, как и вы, сможете обменяться опытом, что пойдёт вам на пользу.
Не переставайте учиться
Теперь, когда вы обладаете солидным набором знаний и умений, время перейти к следующей проблеме – как оставаться на плаву. Поток информации бесконечен. Чтобы быть в курсе, я подписался на несколько изданий – JSK Daily, Frontend Buzz, JavaScript Weekly, JavaScript World, Hashnode Times. Это помогает мне узнавать про новые события, обновления. Это не занимает много времени. Я читаю новости после работы или во время перерывов. Наиболее интересные мысли и статьи я сохраняю в Trello или на GitHub. Если меня заинтересовала новая технология, я выделяю время для изучения.
Кроме того, я ежедневно просматриваю видеоуроки.
Как преодолеть разочарование
Как я уже говорил, каждый разработчик, вне зависимости от его опыта прошёл период неудач. Программирование – это бесконечное решение проблем. Иногда, для того, чтобы решить какую-либо проблему, нужно время. Так что это важно уметь работать, несмотря на неудачи.
Если вы чувствуете, что пора сделать перерыв – сделайте его. Займитесь чем-нибудь более прикладным, занимайтесь спортом, отдохните с друзьями. Разнообразьте свою жизнь, а когда почувствуете, что отдохнули, возвращайтесь к работе. У вас появится заряд энергии и мотивации. У меня было несколько фаз, когда мне требовался отдых. После него я чувствовал себя лучше.
Что я изучил
Ниже я приведу несколько важных советов, которые пригодятся в процессе изучения.
Научитесь правильно искать
Это может показаться излишним, но это действительно важно. Умение задавать правильные вопросы поможет в процессе работы. Задавайте прямые, простые вопросы. Не доверяйте первому попавшемуся ответу. Исследуйте вопросы глубже, чем вам на данный момент.
Научитесь задавать правильные вопросы и выбирать правильное время
Правильно задать вопрос может быть очень сложным для новичка. Мне было неловко от того, что я не мог сформулировать свой вопрос правильно и потому получал совсем не ту реакцию, которую ожидал.
Помогайте другим
Если вы что-то знаете, поделитесь с другими. Найдите сообщество программистов и помогайте другим. Это поможет вам не только ощутить удовлетворение, но и освежить знания. Помогать другим никогда не поздно.
Заключение
Изучение JavaScript или других языков программирование – непростое дело, но оно безусловно стоит потраченных сил и времени. Изучение требует настойчивости. Но если у вас есть настойчивость, необходимые ресурсы, и мотивация, вы достигнете больших успехов. Какой бы способ обучения вы не выбрали, не забывайте, что он должен быть интересным для вас.
Как изучать и использовать JavaScript с удовольствием: нюансы разработки
От автора: еще пару месяцев назад я не мог смотреть на JS без нервов. Я на 100% устал от JS и не мог выйти из этого состояния. Оно продолжалось много лет. Сегодня я люблю использовать JavaScript и его экосистему. Что произошло?
Я использовал JS в той или иной форме с 90-ых. У меня есть книги, которые сейчас смотрятся довольно смешно. В них полно выражений document.write.
За последние пару лет JS сильно изменился. Поначалу я не успевал изучать все эти изменения. Я не мог принять столько много нового за раз. JS менялся, я же сопротивлялся. Я так долго его учил, а он вдруг стал меняться.
Я нашел комментарий в популярной статье «Modern JavaScript Explained For Dinosaurs». Там говорилось, что «изучать современный JS очень сложно, если не делать это с самого начала»:
«Я бы сказал, что учить с самого начала (да, я «такой» старый) еще сложнее — Tim Tate»
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееВ 2012 я серьезно погрузился в JS и Node.js. ES6 для меня стал самым большим изменением в языке за все время, я такого раньше не видел. Предыдущее большое изменение было в 2009 с ES5. ES6 буквально все изменил. Это было настолько крупное обновление JS, что каждый день было столько много новых фишек, которые могли попасть в спецификацию, но вы не знали, попадут они или нет. И приходилось наверстывать упущенное, пока все в Twitter обсуждали, что же будет следующим крупным нововведением.
Var ушел в прошлое.
Function больше нет.
Прототипное наследование, на изучение которого ушло так много времени, исчезло, скрылось под классами.
И это было только начало.
Построение всего
Один из больших сдвигов – построение.
Мы ушли от простого подключения JS файлов через тег script и получили этапы построения, во время которых наш язык компилируется в непонятный огромный файл. Сначала я сильно сопротивлялся, я стоял в своей башне, вооруженный до зубов, готовый к бою с этим построением.
Когда подошло подкрепление Babel, поначалу я сражался еще жестче. Но все же в конце я поднял белый флаг и присоединился к врагу.
Я понял, что Babel это не какая-то прикольная библиотека, которая предлагает будущее, самые новые функции, и когда все это появится в браузерах, мы забудем о Babel. Нет, Babel в обозримом будущем останется.
Когда ES2017 будет полностью поддерживаться в браузерах, Babel разрешит ES2018, ES2019 и т.д. Выхода нет. Прими будущее, Babel – твой друг.
Используйте простейшие альтернативы
Инструменты – одна из сложнейших частей JS сейчас. Да, можно изучить вдоль и поперек Webpack, но если начнете, игнорируйте все и используйте готовые решения типа create-react-app, React Boilerplate, которые прячут мелкие детали от вас и позволяют сосредоточиться на коде.
Не начинайте с настройки окружения, учите с помощью Glitch: в изучении современного JS нет простейших тем.
Больше никаких огромных релизов
ES6 был настолько большим, что комитет ECMAScript решил делать релизы поменьше. Вот почему ES6 также называют ES2015, это был первый релиз с годом – теперь релизы будут выходить каждый год. Так легче изучать что-то. Будет меньше изменений, так как время их введения ограничено, и это предсказуемо (сдавайтесь, грядут изменения).
Игнорируйте шум
Если вы похожи на меня, вы фоловите в Twitter много людей, которые всегда находятся на самой передовой. Может быть, следующим трендом станут некие лидеры, которые будут диктовать свои мысли. Говорят использовать Х, все используют Х.
Может, им нравится показывать свой код в последних API, которые совсем не стандартизированы, но их можно включить в браузере через флаг.
У них могут быть хорошие причины для этого. У вас нет. Не ведитесь на новые блестяшки, сосредоточьтесь на работе.
Новые фреймворки не выходят каждую неделю
В сети ходит шутка про «фреймворк месяца» или «новую библиотеку недели». Это правда, с JS работает огромное количество людей, и это замечательно. Это приносит инновации и эволюцию, характерный опыт JS за последние пару лет (что для экосистемы языка очень много).
Но что-то большое зачастую мало что меняет.
React 5 лет.
Vue 4 года.
4 года – очень много в IT. Это стабильные технологии. Учите их, они останутся надолго, слишком надолго (и не уйдут).
«У вас полно времени, чтобы стать экспертом в любом из этих фреймворков. В ближайшее время они никуда не уйдут.»
Примите тот факт, что все приходит и уходит
У всего есть жизненный цикл.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееПару лет назад везде использовали jQuery. Сейчас на нем редко начинают новые проекты.
В 2013 был популярен Backbone.js. Сейчас он пропал.
CoffeeScript стерли с лица земли.
Ember.js, Angular.js и Meteor выстрелили и держатся в топе несколько лет. Сейчас больше всего говорят за React, Vue и Angular (это не Angular.js).
Цикл таких основных фреймворков длится пару лет. У меня все еще много приложений на Ember.js, и все они хорошо работают. Если они работают, их не нужно обновлять. Я не планирую трогать их.
«Технология развивается и созревает. После о ней уже не говорят, ее используют.»
Вы не так глупы, чтобы использовать jQuery
Некоторых людей не пробить, но если вы много читаете, вы видели таких людей, кто презирает технологию, которая когда-то все использовали – они-то лучше знают и хотят сказать вам, что вы ошибаетесь.
Программирую на PHP уже долгое время, привык к нему. Нормально, что люди критикуют что-то популярное. Даже Go иногда критикуют за простоту, хотя в этом и фишка. Всегда найдутся такие люди.
В качестве примера процитирую твит Pieter Levels, который построил огромный независимый бизнес на одном PHP файле. Почитайте комментарии.
Как новичку, вам могут сказать, что вы выбрали старую технологию, которую больше никто не использует, и что нужно использовать React.
Не слушайте их.
Помните: если для вас это работает, это правильный стек.
«Если для вас это работает, это правильный стек.»
Почти всегда технологии больших компаний создаются под нужды, которые отличаются от ваших или вашей небольшой команды. Используйте, что знаете, и делайте что-то отличающееся, даже без последних технологий.
Сейчас, скорее всего, вам не нужен jQuery. Но не вместо фреймворка – обычный JS очень хорош.
Другой важный момент – чрезмерное усложнение. Не используйте технологию просто, чтобы казаться умнее. Узнайте ее получше. Узнайте, когда фреймворк или библиотека помогут вам.
Вам не нужно знать все. Найдите баланс
Это может прозвучать как цитата из Twitter, но никто не знает всего. Никто не может выучить все, что сейчас происходит во front end разработке. Это вечная школа. Закончить ее не удастся.
Изучайте технологии с user-friendly документацией
Не случайно у React и Vue такая хорошая документация.
Это ключевая часть успеха.
JavaScript снова изменится
В прошлом году язык ECMAScript представил await/async. Сейчас они очень часто используются. Код на Promise выглядит просто ужасно, вы захотите все переписать.
vНо не делайте этого, лучше используйте новые функции под новый код.
То же самое будет в этом году с ES2018. Все поговорят о нем какое-то время, а потом вернутся к работе и начнут говорить о функциях ES2019.
Примите изменения. Это намного лучше, чем использовать технологию, которая через пару лет будет никому не нужна: JS никуда не денется!
Учите основы и ищите свой путь
Разработка под веб-платформу требует частого обязательного изучения чего-то нового, даже просто для того, чтобы знать возможности.
Иногда вам хватит и 20% потраченного времени на 80% новых функций, не углубляясь в крайние случаи.
Путешествие только началось
По сравнению с другими языками JS все еще молод. Он очень популярен и за последние пару лет ему удалось сильно измениться. Язык каждый день привлекает много талантливых разработчиков. Удивительно представить, как мы будем писать через 10 или 20 лет.
Автор: Flavio Copes
Источник: https://hackernoon.com/
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Смотретькак написать JavaScript — руководства на Skillbox
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.
Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Нас пока интересуют только браузеры и HTML-странички.
Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.
Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
WScript.echo («Привет, Skillbox!«)
Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.
Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами <script> и </script>. Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.
Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.
<html>
<script>
alert(«Привет, Skillbox«)
</script>
</html>
Результат:
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
<html>
<script>
confirm(«Привет, Skillbox«)
</script>
</html>
Результат:
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
Синтаксис здесь такой:
prompt (сообщение, значение_поля_ввода_данных)
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Код:
<html>
<script>
prompt(«Передай привет Skillbox«, «Привет«)
</script>
</html>
Результат:
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Консоль разработчика в Chrome.В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.
Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.
Курс «JavaScript с нуля»
Практический 4-х месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтэнд для интерактивного веб-проекта и положить кейс к себе в портфолио.
- Живая обратная связь с преподавателями
- Неограниченный доступ к материалам курса
- Стажировка в компаниях-партнёрах
- Дипломный проект от реального заказчика
- Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
С чего начать изучение JavaScript?
JavaScript – прототипно-ориентированный язык программирования, который используется для написания сценариев, выполняемых специальным программным обеспечением. JavaScript часто используется при написании сценариев для веб приложений, но в последнее время язык начал активно применяться и в других областях разработки – в серверных приложениях (node.js), на мобильных платформах (PhoneGap) и даже для разработки приложений для Windows (Windows Store with JS). Как вы видите, язык достаточно активно используется и входит в 10 популярных языков программирования, поэтому многие начинающие разработчики и уже опытные изучают этот язык программирования. В сети можно найти самоучители, книги с примерами кода и видео уроки по JavaScript в достаточном количестве. Но проблема в том, что уроков для начинающих и других учебных материалов очень много, и у большинства возникает проблема — «что и в какой последовательности учить?». Задача данной статьи помочь вам найти правильный путь в изучении JavaScript.
Каждый для себя выбирает наиболее удобную и эффективную форму обучения – это могут быть книги по JavaScript и самоучители для самостоятельного обучения, очные курсы программирования, где тренер может ответить на вопросы, или видео уроки по JavaScript и примеры JavaScript кода. Какой бы из подходов вы ни выбрали – главное, последовательно и планомерно следовать программе обучения и максимально много практиковаться, так как без практики запомнить и научится применять большое количество разнообразных языковых конструкций достаточно тяжело.
Если вы выберите самостоятельное изучение, обязательно приобретите следующие книги по JavaScript. Настольная книга любого JavaScript разработчика – Дэвид Флэнаган «JavaScript Подробное руководство». Вторая книга, которая позволит вам правильно организовывать свой код — Стоян Стефанов «JavaScript Шаблоны», но она пригодится вам позже, когда вы разберете примеры JavaScript кода из предыдущей книги.
В изучении JavaScript можно выделить несколько этапов:
- Изучение языковых конструкций: переменные, циклы, условные конструкции, функции.
- Освоение объектов и массивов.
- Изучив основы работы с языковыми конструкциями и основными типами данных, можно перейти к освоению главной задачи JavaScript – манипулированию DOM дерева. Вы должны научится работать с элементами, которые находятся на странице, динамически создавать новые узлы и изменять существующие.
- Изучение шаблонов проектирования и кодирования, которые позволят разрабатывать понятный и сопровождаемый код.
- Изучение дополнительных библиотек и фреймворков, например, jQuery.
Изучая материалы книги Дэвида Флэнагана, вы сможете пройти первые 3 этапа, а книга Стояна Стефанова поможет научиться правильно организовывать JavaScript код. В дополнение к книгам вам могут помочь видео уроки по JavaScript для начинающих и JavaScript для профессионалов.
от начала до конца / Habr
TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.
У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.
Bad parts
Из-за того, что язык писался чуть ли не за две недели (это очень мало), в нем был допущен ряд багов. А позже, когда язык вышел и был содран Майкрософтом, уже было поздно что-то менять. Некоторые идеи — это тяжелое наследие Java, от которого взяли синтаксис языка.
Язык программирования со слабой типизацией, с ошибками в реализации, с тяжелым наследием, с особенностями функционального языка вызывает только одно ощущение — «КАК? НУ КАК?». Постоянно пополняемый список «перлов» можно почитать здесь.
Чтобы не сойти с ума при работе с JavaScript, надо понимать, как работает слабая типизация, как работает область видимости переменных (глобальные переменные зло), как работает this, prototype и конструкторы. Также поможет jshint, чтобы избегать «плохие части» языка.
Вся эта история более подробно рассказана во второй лекции Дугласа Крокфорда. А лучше посмотреть все 8-серий. Там есть титры ;).
Стоит отметить, что, несмотря на все минусы, у автора получилось сделать первый функциональный язык, c таким широким распространением. У Крокфорда есть вводная статья про функциональную природу JavaScript.
Базовые вещи, которые нужно понять (следующие из функциональной/асинхронной природы языка) это: что такое control flow и как он помогает при работе с асинхронным языком и как работает обработка ошибок (try/catch не всегда помогают).
JSON, AJAX и кроссбраузерность
Следующим этапом в развитии JS были JSON, AJAX и кроссбраузерная разработка. Огромный скачок в этом этапе сделан благодаря jQuery. Очень рекомендую ознакомиться с туториалом от Джона Резига (автор jQuery). В туториале показаны некоторые приемы, использованные при создании jQuery. Или можно посмотреть интересные идеи непосредственно в исходниках jQuery. Также интересные приемы рассмотрены в JavaScript patterns и в essential js design patterns. Если для вас это все еще сложно, то можно ознакомиться с более базовыми вещами здесь: JavaScript Garden, eloquentjavascript
Flash off
HTML5 (html5rocks, diveintohtml5) и CSS3 вытеснили Flash из браузеров (ну еще не до конца, но это только вопрос времени). Отдельное спасибо за это Стиву Джобсу. Теперь в распоряжении у JS есть: Canvas, WebGL, WebSockets, WebWorkers, Audio, Video и т.п.
Server-side
Гугл разродился браузером. И ускорил JavaScript до нельзя, подарив всему миру V8. Из которого в свою очередь родился NodeJS (by Ryan Dahl). Так JS попал и на сервер. Казалось бы куда дальше, и так заняли весь веб-стек технологий. Но и это не конец, JavaScript умудрился вытеснить еще и SQL. Спасибо парням из 10gen за MongoDB. Еще по теме: SQL to MongoDB, sql comparison.
Все уже и сами могут сделать этот вывод, но я это скажу вслух напишу: теперь разработать веб приложение от начала и до конца можно, зная только JavaScript (html и css не в счет).
Ложка дегтя
- NodeJS еще не дошел до версии 1, есть еще ряд не закрытых вопросов. Т. е. понятно, как написать чат на NodeJS, но как быть с большими и сложными проектами?..
- Нет нормальных туториалов, так как технология активно развивается, и они быстро устаревают.
- Разработка модулей происходит стихийно. Многие модули заброшены. Заходишь на Github и видишь, что последний коммит был около года назад.
- Нет «взрослых» фреймворков. Есть «молодые» подающие надежду проекты. Но нет фреймворков уровня рельсов.
Лирическое отступлениеЕсть мнение, что в последних рельсах очень высокий порог входа, но на самом деле это потому, что в рельсах решены все стандартные задачи и тебе не надо изобретать велосипед каждый раз. Фреймворки для node оставляют много пространства для фантазии (не хватает CoC). Если посмотреть на проекты на Express (дефакто веб-фреймворк), то вы не найдете и двух одинаковых проектов. Кто-то настройки складывает в config.js, кто-то центральное приложение делает как модуль для тестирования, кто-то использует синтаксический сахар для автозагрузки модулей и т. п.
Скорее всего это «подростковые прыщи», которые со временем пройдут. Но пока это еще актуально.
Дальше больше
Фронтенд разработка
Наконец-то фронтенд разработка выбралась из каменного века, когда все делалось вручную. Появились инструменты для автоматизации (инструмент написанный на js специально для этих целей) и менеджер пакетов (я знаю, что это не первый менеджер, но будем надеяться, что этим будут пользоваться все). Все это собрано в кучу в проекте yeoman. Если говорить про yeoman, нельзя не упомянуть: html5-boilerplate и bootstrap
MV*
Вместе с Ajax появились и первые «тяжеловесные» библиотеки/фреймворки: ExtJS, YUI и т. п. Но они громоздкие и неудобные. JQuery c другой стороны более легковесный и привычный, но так как это библиотека, а не фреймворк, он и не предлагает метод структуризации кода. На помощь пришел Backbone. Следом за Backbone появилось много MV* фреймвокров. О них уже рассказывали: статья на Хабре, продолжение и статья на английском. А также можно сравнить фреймворки «на практике», почитав исходники на todomvc.
Angular
Этот фреймворк примечателен тем, что он пытается принести DataBinding в JavaScript. Это не единственный фреймворк который это делает. Но авторы на этом не останавливаются и хотят принести нативную поддержку DataBinding в браузеры. Они разрабатывают спецификацию «model driven views» вместе с командой Chrome. Ну еще он хорош, потому что есть хорошая документация, видео, заложено тестирование. Он довольно легкий и хорошо интегрируется с другими библиотеками.
Meteor
Именно за этим фреймворком (и ему подобными) будущее NodeJS. И вот почему, сам по себе JavaScript на сервере это еще то «удовольствие». Мы то с вами понимаем, что все эти рассказы про бешеную производительность из-за асинхронности — это только маркетинг. Скорость, отказоустойчивость, способность выдержать нагрузку определяется не ЯП, а архитектурой. От того, как организованы хранение данных (шардинг), кеширование, очередь задач, распределенные вычисления и от отсутствия узких мест (bottleneck) и т. п. Понимая это, я бы лучше выбрал ЯП, на котором легко писать и легко поддерживать большую базу кода, для которого есть много готовых решений (намекаю на RoR). Узкие места, требующие огромной производительности, распределенные вычисления и т. п. можно написать на Erlang, Java или С.
Но то, что может Meteor, не может предложить ни одна другая технология: полное повторное использование кода с сервера на клиенте (или наоборот), ну и еще маленькая тележка магии (датабиндинг, клиентский хот релоад…).
Его единственное преимущество является и его минусом. Клиентский и серверный код не разрывны. Meteor не очень подходит для тех случаев, когда клиент делается с использованием другой технологии. Например, нативный мобильный или десктопный клиент.
Кстати в ближайшем конкуренте Meteor derby этот вопрос решаем. Так как они используют Express и гораздо меньше магии, то к нему можно прикрутить REST API.
Если подумать, это не первая попытка уйти от классического клиент-северного подхода. До этого был, например, GWT. Но все предыдущие попытки были менее эффектны и это был не JavaScript.
Mobile
Мало того, что JS добрался до мобильных браузеров и выжил Flash, он еще претендует и на место нативных приложений. Это стало возможно благодаря Adobe Phonegap (ядро проекта было отдано в open-source под названием Appache Cordova).
Если добавить библиотеки для мобильных устройств, например: jQtouch, Sencha Touch, zepto; то получатся приложения с «нативным интерфейсом». Вот как смешать angular и jqtouch под PhoneGap
Если добавить движки для игр, то получатся мобильные игры и т. п.
Desktop
Давно уже существовали попытки сделать написание десктопных приложений таким же простым, как написание веб приложений. Вот одни из последних претендентов: tidesdk, Packaged apps от Google Chrome.
Есть другие подобные проекты, о которых ранее рассказывали на Хабре: AppJS, Node Webkit.
Заменители JavaScript
После того, как все сообразили, насколько важное место занимает JavaScript, решили придумать что-то более удачное, чем JavaScript. Есть куча ЯП, которые могут быть скомпилированы в JS. Среди этих проектов особенно можно выделить:
Конечно при таком подходе с языками «посредниками» проблема с дебагом на лицо. Она решается с помощью Source Maps.
Итого
JavaScript очень своеобразный язык, с родовыми травмами, которые в разные времена пытались решить по разному: jslint, заменители JavaScript, es6. Но не смотря на все проблемы, JavaScript активно развивается и набирает обороты: сообщество растет, инвестиции вливаются. Все интересное еще впереди!
Учебный план по осваиванию современного JavaScript
Статья для тех, кто не знает с чего начать изучение современного JavaScript и какие библиотеки и фреймворки лучше использовать.
Как наверняка и каждый из вас, я недавно прочел статью Хосе Агуинаги: «Каково это, учить JavaScript в 2016»
Конечно, эта статья расшатывает нервишки: я дважды видел её в топе на Hacker News! Это так же была самая популярная статья на /r/javascript, а на данный момент она насчитывает более 10 000 лайков на Medium, что как бы больше, чем собрали все мои посты вместе взятые… Ну а впрочем, кто считает эти лайки, верно?
Меня это не удивило, я уже давненько знаю, как может обескуражить экосистема JavaScript. На самом деле, я запустил State Of JavaScript, чтобы понять, какие библиотеки были на самом деле популярны и, как следствие, выделить полезные из общей массы.
Но сегодня я хочу пойти еще дальше! Вместо того чтоб рассказывать о положении вещей, я собираюсь дать вам чёткий образовательный план, как шаг за шагом противостоять экосистеме JavaScript.
Для чего это нужно
Эта программа для вас, если:
* вы уже знакомы с основными концептами программирования, как например, переменные и функции
* вы уже занимались back-end разработкой используя, скажем, PHP и Python, и, возможно, использовали front-end библиотеки, такие как jQuery, для каких-то мелких задач
* вы хотите серьезно вникнуть во front-end разработку, но уже тонете в фреймворках и библиотеках, еще даже не начав ею(разработкой) заниматься
Темы, которые мы затронем
* Как выглядит современное веб-приложение на JavaScript
* Почему нельзя «просто использовать jQuery»
* Почему React — это самый надежный выбор
* Почему сначала может не понадобиться углубленное изучение JavaScript
* Как быстро выучить синтаксис ES6
* Зачем и как быстро выучить Redux
* Что такое GraphQL и почему это реально крутая вещь
* Куда двигаться дальше
Упомянутые ресурсы
Эта статья содержит несколько партнерских ссылок на Wes Bos курсы, но я рекомендую этот материал, потому что действительно считаю, что он стоящий, а не только из-за партнерства. Если вы предпочли бы другие ресурсы, Марк Эриксон поддерживает большой список ссылок на руководства по React, ES6 и Redux.
JavaScript vs JavaScript
Перед тем как мы начнем, нам нужно убедиться, что мы говорим об одном и том же. Если вы загуглите «Выучить JavaScript» или «Учебный план по JavaScript», то вы наверняка найдете горы ресурсов, которые помогут вам выучить этот язык.
Но это, в принципе, легкая часть. Пока вы будете неотступно копать вглубь и учить все сложности языка, правда будет заключаться в том, что большинство веб-приложений относительно просто написаны. Другими словами, 80% того что вам понадобится для написания веб-приложений, будет описано в первых главах каждой типичной книги по JavaScript.
Нет, самое сложное – это освоить экосистему JavaScript, со всем её множеством друг другу противоречащих фреймворков и библиотек. Хорошая новость! Эта статья как раз таки об этом!
Строительные блоки JavaScript приложений
Что бы понять, почему же современные JavaScript приложения выглядят так сложно, нужно сначала понять как они работают.
Для начала, давайте глянем на «традиционное» веб-приложение, скажем 2008 года:
1. База данных отсылает данные на ваш back-end (например ваше приложение на PHP или Rails)
2. Back-end считывает данные и выводит HTML
3. HTML отправляется в браузер, который и отображает его как DOM(собственно, сама страница)(Document Object Model — прим. переводчика)
Сейчас много таких приложений посыпают JavaScript—кодом прямо в клиенте, чтобы добавить взаимодействие с пользователем — модальные окна и табы, но в своей основе, браузер все равно получает HTML и отображает его.
А теперь давайте сравним его с «современным» веб-приложением 2016 года (также известным как «Приложение одной страницы»):
Заметили разницу? Вместо HTML, сервер отныне шлет данные, а построение HTML на основе данных происходит уже на стороне клиента (поэтому вы так же посылаете код, который говорит клиенту, как нужно преобразовать это построение).
У этого есть свои последствия.
Сначала хорошие:
* Для данного типа контента, посылать только данные гораздо быстрее, чем посылать целые HTML страницы
* Клиент тотчас же может менять контент, даже не обновляя страницу браузера (отсюда и название «Приложение одной страницы»)
И плохие:
* Начальная загрузка занимает больше времени, когда количество данных растет
* Теперь надо найти место для хранения и управление данными на стороне клиента тоже, в случае, если вы хотите кэшировать их или проверить
И неприятные:
* Поздравляю! Теперь вам придется возиться с клиентской частью не меньше, чем с серверной
Клиент-серверный спектр
Есть ли все-таки смысл так потеть, если существует так много плохих сторон? Почему бы просто не пользоваться старыми добрыми PHP-приложениями?
Ну хорошо, представьте, что вы создаете калькулятор. Если пользователь хочет знать, сколько будет 2 + 2, будет бессмысленно проделывать путь обратно к серверу, чтоб посчитать результат, если браузер и сам может это сделать.
С другой стороны, если вы создаете чисто статический сайт, например блог, то было бы абсолютно правильно генерировать конечный HTML на сервере и не переживать больше за него.
Правда в том, что большинство веб-приложений остаются где-то между. Знать бы где…
Но хорошо то, что спектр наш не бесконечный: вы не можете начать с чисто-серверной стороны и потихоньку двигаться в сторону чисто-клиентской стороны приложения. В какой-то момент (в момент, так называемого «разделения»), вам придется насильно остановиться и рефакторить все что вы написали или просто оставить массу неподдерживаемого спагетти-кода (это особенно опасный и специфический вид плохого кода — прим. переводчика).
Вот почему нельзя «просто использовать jQuery» для всего подряд. Вам наверное кажется, что jQuery — это скотч. Безусловно, это потрясающая вещь для решения маленьких проблем, но если вы решаете им все больше и больше проблем, код начинает выглядеть отвратительно.
С другой стороны, современные JavaScript фреймворки больше похожи на 3D-печать. Их использование занимает больше времени, но результат выходит гораздо приятнее и красивее.
Другими словами, осваивать современный JavaScript-стэк равносильно ставке, где стартовая планка неважна. Большинство веб-приложений, вероятнее всего, сделают свое дело на правой(клиентской) стороне разделения. Рано или поздно.
Неделя №0: Основы JavaScript
Если вы back-end разработчик, вы скорее всего пробовали JavaScript. А если нет, то С-подобный синтаксис будет вам и так понятен, если вы PHP или Java разработчик.
Но если JavaScript — это что-то совершенно неизведанное для вас, не отчаивайтесь. На просторах сети есть много ресурсов, которые быстренько помогут вам разобраться. Уроки по JavaScript от Codecademy — отличное начало!
Неделя №1: Начинаем учить React
Теперь, зная основы синтаксиса языка и понимая как приложения могут быть такими сложными, давайте поговорим о чем-то особенном. С чего начать?
Конечно с изучения React!
React — это UI-библиотека, разработанная и выложенная в открытый доступ компанией Facebook, она берет на себя ответственность за преобразование данных в HTML.
Не поймите меня неправильно, я не могу утверждать, что React — это лучшая библиотека (так как это очень субъективно), но могу смело утверждать, что она очень хороша.
* React может и не самая популярная библиотека, но она достаточно популярна
* React может и не самая легкая библиотека, но она достаточно легка
* React может и не самая простая библиотека, но она достаточно проста в изучении
* React может и не самая приятная для изучения библиотека, но она достаточно приятна
Другими словами, React может быть не самым лучшим выбором в любой ситуации, но я уверен, что он самый надежный. И поверьте мне, начало — это не лучшее время для того, чтоб рисковать при выборе технологии.
Также React научит вас некоторым основным концептам, таким как: компоненты, состояние приложения и функции без состояния, которые позже могут оказаться очень полезными, вне зависимости, какой фреймворк или какую библиотеку вы выберете в конечном итоге.
Наконец, у React есть обширная экосистема других библиотек, которые отлично работают с ним в связке. И его популярность говорит о том, что вы всегда сможете найти помощь на таких сайтах, как StackOverflow (или GitHub — прим. переводчика).
Я лично рекомендую курс Wes Bos — React для новичков. Именно с помощью него я лично выучил React, а он к тому же ещё и полон лучших практик для React.
Стоит ли сначала углубленно учить JavaScript?
Если вам нравится учиться последовательно, вы наверное хотели бы сначала хорошенько разобраться в основах языка, прежде чем заниматься чем-либо другим. Но это будет равносильно тому, как если б вы учились плавать, изучая анатомию человека и динамику жидкости. Безусловно, это играет огромную роль в плавании, но гораздо веселее и практичнее было бы просто прыгнуть в бассейн!
На этот вопрос нет четкого ответа «да» или «нет», он просто зависит от вашего стиля обучения. Правда в том, что большинство руководств и уроков по основам React будут использовать лишь крохотную долю языка JavaScript. Так что это прекрасная идея — сосредоточится на том что нужно сейчас и оставить все остальное на потом. Это так же относится и ко всей JavaScript экосистеме. Не стоит сейчас переживать о том, что вы не знаете такие вещи, как Webpack или Babel. К тому же, недавно React обзавелся своей собственной утилитой командной строки, которая позволяет вам создавать приложения, без какой-либо конфигурации его сборки.
Неделя №2: Ваш первый проект с использованием React
Давайте предположим, что вы уже завершили курс по React. Если мы с вами похожи, то две вещи, скорее всего, будут правдивыми:
* Вы уже успели забыть половину того что выучили
* Вы уже ждете не дождетесь, применить свою вторую половину полученных знаний на практике
Мне кажется, что лучший способ выучить фреймворк или язык — это использовать его. И внедрять что-то новое в свои собственные проекты — это лучшее что можно придумать, чтобы освоить это «что-то новое». Ваш личный проект может быть каким угодно: от одностраничного веб-сайта до сложного веб-приложения, но у меня есть ощущение, что редизайн своего веб-сайта и есть та золотая середина, с которой стоит начать. К тому же, я знаю, что вы, возможно, не обращали внимания на него(свой веб-сайт) уже долгое время.
Ранее я говорил о том, что использование приложений одной страницы со статичным контентом может быть излишним, но у React есть секретное оружие — Gatsby, статичный генератор сайтов для React, который позволяет вам «схитрить» и получить все преимущества React, безо всех отрицательных сторон.
Вот, почему Gatsby — это отличный выбор:
* Предварительно настроенный Webpack, а это значит, что вы получаете все преимущества, не получая головной боли
* Автоматическая маршрутизация, основанная на структуре вашей директории
* Весь HTML-контент также генерируется на стороне сервера, так что вы получаете только самое лучшее с обеих сторон
* Статичный контент означает отсутствие сервера и возможность чрезвычайно просто опубликовать свой веб-сайт на GitHub Pages
Именно Gatsby я использовал для написания State Of JavaScript, не волнуясь за маршрутизацию, конфигурацию инструментов сборки или рендеринга на серверной части. Это сэкономило мне море времени.
Неделя №3: Осваиваем ES6
В моей попытке выучить React, я дошел до того момента, когда я мог просто копипастить код из примеров, но также было ещё много того, что я не понимал.
В частности, я был не знаком с такими, недавно пришедшими к нам из ES6 особенностями, как:
* деструктуризация объектов
* классы
* стрелочные функции
* операторы расширения
Если у вас такая же ситуация, то нужно немного времени, чтоб освоить ES6. Если вам понравился курс React для новичков, то вам наверное не терпится уже пройти отличный курс ES6 для каждого от Wes Bos. Или, если вы предпочитаете бесплатные ресурсы, то вам стоит прочесть книгу Nicola Bevacqua — ES6 на практике. Хорошим упражнением для освоения ES6, было бы пройтись по старому коду (например, по тому, что мы писали во второй неделе) и сконвертировать его в более короткий с помощью ES6.
Неделя №4: Открываем для себя управление состояниями
На этом этапе вы уже должны уметь создавать простой front-end со статичным контентом с помощью React. Но настоящие веб-приложения не статичны. Они должны получать откуда-то данные, из какой-нибудь базы данных, скажем. До этого мы могли просто отсылать данные отдельным компонентам, но такой подход предшествует беспорядку.
Что если два компонента должны будут отобразить одни и те же данные, к примеру? Или нуждаются в обмене информацией? Вот тут-то и приходит на помощь управление состояниями. Вместо того чтобы хранить ваше состояние(т.е. данные) в компоненте, вы оставляете его в глобальном хранилище, которое в нужный момент посылает его(состояние) к вашим React-компонентам:
В мире React, самая популярная библиотека для управления состояниями называется Redux. Она не только помогает собрать воедино все ваши данные, но также и предлагает нам некоторые протоколы для управления этими данными.
Можно сравнить Redux с банком: вы не можете обратиться к локальной ветке и изменить ваш текущий баланс («а добавь-ка мне тут парочку нулей!»). Вместо этого, вы заполняете форму, передаете её работнику банка, у которого есть права на исполнение вашего требования. Так же, Redux не даст вам изменить глобальное состояние напрямую. Вместо этого, вы пускаете в ход редукторы — специальные функции, которые проводят операции и возвращают новое, обновленное состояние, как результат.
Результат этой дополнительной затраты времени — это высокостандартизированный и поддерживаемый поток данных в вашем приложении и доступ к таким инструментам, как Redux Devtools, для визуализации этих данных.
Опять таки, вы можете обратиться к нашему другу Wes Bos и выучить Redux с помощью его курса, который, кстати, абсолютно бесплатный.
Или же вы можете посмотреть серии видеоуроков на egghead.io от создателя Redux, которые также бесплатны.
Бонусная неделя №5: Конструирование API с GraphQL
До сих пор мы много говорили о клиентской части приложения, но это только полдела. И даже не погружаясь в глубины экосистемы Node, все равно необходимо рассмотреть один из ключевых аспектов любого веб-приложения: как данные переходят от сервера к клиенту. Как и всё остальное, эта часть разработки со временем очень шустро меняется. GraphQL (еще один open-source проект от Facebook) предлагает серьезную альтернативу традиционным REST API.
В то время, как REST API использует несколько REST маршрутов, каждый из которых предоставляет доступ к уже заранее определенным данным (скажем, /api/posts, /api/comments итд.), GraphQL использует один пункт назначения, позволяющий пользователю запрашивать нужные ему данные. Подумайте об этом, как о многочисленных походах в булочную, за молочными продуктами, за мясом и рыбой отдельно, вместо того, чтоб дать кому-то свой список покупок и послать его купить все за раз.
Эта новая стратегия становится особенно полезной, когда вам нужно сделать запрос у нескольких источников данных. Как и в примере со списком покупок, вы теперь можете получить данные со всех источников за один-единственный запрос.
За последний год, GraphQL неплохо нашумел, а многие проекты (такие, как Gatsby) планируют адаптироваться под него. Сам по себе GraphQL — это протокол, но лучшая его реализация на данный момент, это, наверное, библиотека Apollo, которая, к тому же, отлично работает с Redux. К сожалению, до сих пор чувствуется недостаток материала по GraphQL и Apollo, но, надеюсь, документация Apollo введет вас в курс дела.
По ту сторону React
Я рекомендовал вам начать с React, потому что это надежный выбор, но это ни в коем случае не означает, что это единственный хороший front-end стэк. Если вы хотите продолжать развиваться, то вот вам два совета:
Vue
Vue — это относительно новая библиотека, но её популярность растет с рекордной скоростью и она уже адаптирована большими компаниями, особенно в Китае, где эта библиотека используется в Baidu и Alibaba (китайский Google и Amazon). А ещё это официальный front-end слой для PHP фреймворка Laravel.
В сравнении с React, вот некоторые хорошие черты Vue:
* Официально поддерживаемые маршруты и библиотеки для управления состояниями
* Фокусирование на производительности
* Порог вхождения ниже, благодаря использованию шаблонов, основанных на HTML
Остается всего 2 вещи, благодаря которым все ещё существует отрыв React от Vue, это: размер экосистемы React и React Native. Но я не удивлюсь, если вскоре увижу Vue с React наравне.
Elm
Если Vue — это доступный выбор, то Elm — передовой. Elm — это не просто фреймворк, а целый язык, который компилируется в JavaScript. Это дает много преимуществ, таких как: повышенная производительность и отсутствие исключений во время выполнения задачи.
Я лично не пробовал Elm, но мне его очень рекомендовали друзья, которые были безумно рады, что открыли его для себя (как показывает рейтинг — 84% положительных отзывов на State Of JavaScript).
Что дальше?
Сейчас у вас должен быть уже приличный запас знаний по front-end стэку и, надеюсь, вы хорошенько потрудились над тем, чтоб добиться хорошей производительности.
Но это не значит, что все кончено! Это только начало вашего пути по экосистеме JavaScript. Может быть вам будут интересны и следующие темы:
* JavaScript на сервере (Node, Express…)
* Тестирование на JavaScript (Jest, Enzyme)
* Инструменты для сборки (Webpack…)
* Система типов (TypeScript, Flow…)
* Работа с CSS в ваших JavaScript-приложениях(CSS Modules, Styled Components…)
* JavaScript для мобильных приложений(React Native…)
* JavaScript для приложений для настольных компьютеров(Electron…)
Я не могу выписать здесь всё, но не отчаивайтесь! Первый шаг всегда самый сложный, и знаете что? Вы его уже сделали, прочитав этот план. Теперь вы понимаете, как разнообразные кусочки экосистемы подходят друг к другу, теперь ваша задача лишь понять, что вы хотите учить дальше и осваивать новую технологию каждый месяц!
Будьте на связи
Вам помог этот учебный план? О какой области из JavaScript вы хотели бы услышать ещё? Оставьте свой комментарий! А также, подпишитесь на рассылку писем от State Of JavaScript.