Комплексное обучение Javascript - Видеоуроки. Учить javascript

Как изучить JavaScript быстрее.

Всем привет! В этой статье мы рассмотрим 6 советов по изучению JavaScript, которые помогут вам освоить его быстрее.

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

Некоторые моменты могут сбивать с толку, особенно, если вы пришли с другого языка программирования
Трудно найти время(и, иногда, мотивацию) для изучения
Когда вы что-то поняли, это легко забыть
Инструменты меняются так быстро, что непонятно, с чего начать

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

1. Не позволяйте будущим решениям останавливать вас от развития сейчас

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

Один из способов решения этой проблемы – это иметь список того, чему вы должны научиться. Например, чтобы стать фронт-енд разработчиком, ваш список должен выглядеть так:

HTML
CSS
JavaScript
немного JQuery
Возможно, какой-нибудь фреймворк
Основы GitHub
Немного WordPress
Хостинг

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

2. Не позволяйте себе забывать то, что уже изучили

Изучение чего-то слишком быстро может стать одной из самых разрушительных вещей в вашем изучении JavaScript. Позвольте мне объяснить.

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

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

Ограничьте количество материала, которое вы изучаете за раз
Практикуйтесь – пишите код

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

3. Подходите к практике правильно

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

Попробуйте следующее:

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

Когда вы изучаете что-то в JavaScript, представляйте, что вы играете с новой игрушкой, автомобилем, парой ботинок или чем-либо еще, что вам нравится.

Воспринимая изучение чего-то в игровой форме, вы обретете знания быстрее, будете помнить их дольше и это будет вам в радость.

4. Найдите время для программирования, используя Facebook трюк

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

У меня действительно было время, когда я только и хотел, что сидеть в Facebook, но я не проводил там часы. Как так получилось? А получилось это потому, что я и не собирался оставаться там долго. Начать работать над чем-то – это самая тяжелая часть, поэтому, сохраняя первоначальное обязательство, мне кажется это сделать проще. Если бы кто-то спросил меня, готов ли я проводить часы в Facebook, я бы ответил нет, потому что у меня нет времени на это. Мне больше нравится заходить туда, чтобы что-то проверить по-быстрому, и только.

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

5. Думайте медленнее и вы будете изучать быстрее

Это противоречит здравому смыслу, поэтому я объясню это историей.

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

"Подожди!" – сказал я ему. "Не торопись и расскажи мне каждый шаг этого кода".

Мой друг продолжил говорить мне о коде в общем.

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

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

В подобных случаях действительно лучше думать медленнее, и вы будете учиться быстрее.

6. Пишите сложный код простым языком

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

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

Заключение

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

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

А как вы относитесь к изучению? У вас есть какие-нибудь советы и приемы, которые не были рассмотрены в этой статье? Или, может быть, вы думаете, что это все ерунда и единственно правильный путь – это сидеть за изучением 12 часов в сутки. В любом случае, я бы хотел услышать ваше мнение в комментариях.

Источник: https://www.sitepoint.com/mind-tricks-to-learn-javascript-faster/

Создано 28.09.2016 17:17:17
Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Каково оно учить JavaScript в 2016 / Хабр

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

— Это теперь называется Front-End инженер, но да, я — именно он. Я работаю с вебом в 2016. Визуализации, музыкальные плееры, летающие дроны, которые играют в футбол, все что угодно. Я только что вернулся из JsConf и ReactConf, так что я знаю новейшие технологии для создания веб-приложений.

— Круто. Мне нужно создать страницу, которая отображает последние действия со стороны пользователей, так что мне просто нужно получить данные от REST и отобразить их в какой-то фильтруемой таблице, ну и обновлять её, если что-то изменится на сервере. Я думал, может быть, использовать JQuery для извлечения и отображения данных?

— О, Мой Бог! Нет! Никто больше не использует JQuery. Ты должен попробовать React: это — 2016! — Интересно. Что такое React?

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

— Звучит заманчиво. Могу ли я использовать React для отображения данных с сервера?

— Ага, но сначала нужно добавить React и React DOM в виде библиотек.

— Подожди, почему две библиотеки?

— Ну, одна — это сама библиотека, а вторая — для манипулирования DOM, который ты теперь можешь описать в JSX.

— JSX? Что такое JSX?

— JSX — это просто расширение синтаксиса JavaScript, который выглядит очень похоже на XML. Это своего рода еще один способ описать DOM. Думай о нем, как об улучшенном HTML.

— Что случилось с HTML?

— Это 2016. Никто больше не пишет на сыром HTML.

— Ну хорошо. Если я добавляю эти две библиотеки, то я могу использовать React?

— Не совсем. Нужно добавить Babel, а затем можно использовать React.

— Другая библиотека? Что за Babel?

— О, Babel — это транспайлер, он позволяет ориентироваться на конкретные версии JavaScript, в то время как пишешь код в любой версии JavaScript. Тебе не обязательно добавлять Babel для того, чтобы писать на ReactJS, но если ты это не сделаешь, то ты застрял с ES5, ну а это 2016, ты должен кодить в ES2016+ как и все крутые чуваки.

— ES5? ES2016+? Я потерялся. Что за ES5 и ES2016+?

— ES5 означает ECMAScript 5. Это версия, на которую ориентируется большинство, поскольку она реализована в большинстве браузеров на сегодняшний день.

— ECMAScript?

— Да, знаешь стандарт JavaScript, который был основан в 1999 году после его первоначального выпуска в 1995 году? Тогда, когда JavaScript был назван LiveScript и только работал в Netscape Navigator. Это было очень запутано тогда, но, к счастью, теперь все ясно, и у нас есть 7 версий этой реализации.

— 7 версий. Серьезно. А ES5 и ES2016+ это?…

— Пятое и седьмое издание соответственно.

— Подожди, а что случилось с шестым?

— ES6? Да, каждое издание является надстройкой предыдущего, так что если ты используешь ES2016+, то ты используешь все функции предыдущих версий.

— Хорошо. А зачем использовать ES2016+ над ES6 тогда?

— Ну, ты можешь использовать ES6, но для интересных штук, типа async и await, тебе нужно использовать ES2016+. В противном случае ты застрял с ES6 генераторами и сопрограммами для блокировки асинхронных вызовов и нормального управления потоком.

— Я понятия не имею, что ты только что сказал, и все эти имена запутаны. Слушай, я просто хочу загрузить кучу данных с сервера, просто подключить JQuery из CDN и просто получить данные с помощью AJAX. Почему я не могу сделать это?

— Чувак, это 2016. Никто не использует JQuery больше, это заканчивается кучей запутанного кода. Все же это знают.

— Ясно. Так что моя альтернатива — это загрузить три библиотеки для извлечения данных и отображения таблицы HTML.

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

— Понятно. А что за менеджер модулей?

— Определение зависит от окружающей среды, но для веба мы обычно подразумеваем все, что поддерживает модули AMD или CommonJS.

— Хорошооооо. А AMD и CommonJS это?…

— Определения. Есть куча способов, чтобы описать, как несколько библиотек и классов JavaScript должны взаимодействовать. Ты можешь написать несколько файлов JavaScript, определяющих API AMD или CommonJS, и использовать что-то вроде Browserify, чтобы связывать их.

— Хорошо, имеет смысл… наверное. А что такое Browserify?

— Это инструмент, который позволяет связать CommonJS описанния зависимостей для файлов, которые могут быть запущены в браузере. Он был создан, потому что большинство людей публикуют эти зависимости в NPM.

— NPM?

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

— Как CDN?

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

— О, как Bower!

— Да, но это 2016, сейчас никто больше не использует Bower.

— Хм, ясно… так мне нужно загрузить библиотеки из NPM?

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

— О, это как в Angular!

— Angular это слишком 2015. Но да. Angular тоже там есть, наряду с VueJS, RxJS и другими интересными библиотеками из 2016. Хочешь узнать о них?

— Давай придерживаться React, я уже узнал слишком много о нем. Так что, если мне нужно использовать React, я вытяну его из этого NPM, а затем использую Browserify?

— Да.

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

— Ага, именно поэтому ты используешь менеджер задач, типа как Grunt или Gulp, или Broccoli для автоматизации запуска Browserify. Ты даже можешь использовать Mimosa.

— Grunt? Gulp? Broccoli? Mimosa? Черт возьми, о чём мы говорим сейчас?

— Task менеджеры. Но они уже не такие крутые. Мы использовали их в стиле 2015 с Makefiles, но теперь мы перешли на Webpack.

— Makefiles? Я думал, что в основном это используется для C или C++ проектов.

— Ага, но, видимо, в вебе мы любим делать вещи сложными, а затем вернуться к основам. Мы делаем это типа каждый год. Ты подожди, через год или два мы еще запилим сборки (assemblies) в вебе.

— Пффф. Ты упомянул что-то под названием Webpack?

— Это другой менеджер модулей для браузера, в то же время он и своего рода Task менеджер. Это как улучшенная версия Browserify.

— ОК. А почему он лучше?

— Ну, может быть не лучше, но более гибкий в плане того, как зависимости связаны. Webpack позволяет использовать различные менеджеры модулей, а не только CommonJS. Например, родные модули ES6.

— Я очень запутался в этих CommonJS/ES6.

— Да все в этом запутались, но можешь больше не париться, потому что есть SystemJS.

— О, Боже, опять что-то-JS. Хорошо, а что это за SystemJS?

— Ну, в отличие от Browserify и WebPack 1.x, SystemJS представляет собой динамический модуль загрузчика, который позволяет связать несколько модулей в нескольких файлах, а не связывая их в один большой файл.

— Подожди, я думал, что мы хотели объединить наши библиотеки в один большой файл и загрузить его!

— Да, но из-за HTTP/2 несколько HTTP запросов на самом деле лучше.

— Стоять! Так чего же мы не можем просто добавить три оригинальные библиотеки для React?

— Ты, конечно, можешь добавить их в качестве внешних скриптов с CDN, но все равно нужно будет добавить Babel.

— Эх. И это плохо, не так ли?

— Да, придется включить полностью Babel-core, а это не будет эффективным для production. На production необходимо выполнить ряд предварительных задач, чтобы проект был полностью готов, а это ритуал, в сравнении с которым вызвать дьявола — это рецепт как сварить яйцо. Надо будет минимизировать файлы, сделать uglify, поиграться со стилями, подумать о загрузке скриптов…

— Понял, понял. Но если не скачивать библиотеки непосредственно с CDN, то как иначе?

— Я бы сделал транспайл из TypeScript с помощью комбо Webpack + SystemJS + Babel.

— TypeScript? Я думал, что мы пишем код на JavaScript!

— Typescript — это и есть JavaScript, или, лучше сказать, надмножество JavaScript. Более конкретно — JavaScript на версии ES6. Ну, та шестая версия, о которой мы говорили.

— Я думал, что ES2016+ — уже надмножество ES6! Почему нам сейчас нужен еще и TypeScript?

— Потому что это позволяет нам использовать JavaScript как типизированный язык и уменьшить количество ошибок во время выполнения. Это 2016, надо добавить некоторые типы в код на JavaScript.

— И TypeScript, очевидно, делает это.

— И Flow, хотя он проверяет только типы, в то время как TypeScript является надстройкой JavaScript, который нужно скомпилировать.

— Эээ… и Flow?

— Это — инструмент для проверки статической типизации, сделанный парнями из Facebook. Они написали его на OCaml, так как функциональное программирование является удивительно крутым.

— OCaml? Функциональное программирование?

— Ну это то, что сегодня юзают крутые пацаны, ну типа, знаешь, 2016. Функциональное программирование. Функции высокого порядка. Currying. Pure функции.

— Я понятия не имею, что это.

— Никто не понимает, в начале. Надо просто знать, что функциональное программирование лучше, чем объектно-ориентированное программирование, и это то, что мы должны использовать в 2016 году.

— Подожди, я учил ООП в универе, я думал, что это круто?

— Ну так было пока Oracle не купил Java. Я имею в виду, что ООП был хорош раньше, и его используют до сих пор, но теперь каждый понимает, что манипулировать состояниями эквивалентно пинанию младенцев, так что теперь все движется к immutable объектам и функциональному программированию. Ребята из Haskell уже 100 лет кричат об этом, и это я еще не упоминал Elm. Но, к счастью, в сети теперь у нас есть такие библиотеки, как Ramda, которые позволяют нам использовать функциональное программирование на простом JavaScript.

— Ты что, просто придумываешь имена? Что еще за Ramnda?

— Нет. Ramda. Как и Lambda. Ну, знаешь, библиотека Дэвида Чембера?

— Дэвида кого?

— Дэвида Чембера. Крутой чел. Один из авторов Ramda. Глянь еще работы Эрика Мейера, если серьезно относишься к изучению функционального программирования.

— А Эрик Мейер это?…

— Тоже функциональщик. Крутой чел. У него есть куча презентаций, где он в странной цветной футболке громит Agile. Еще глянь что делают Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani…

— ОК. Притормози. Все это хорошо и прекрасно, но я думаю, что все это слишком сложно и ненужно для простой выборки данных и их отображения. Я уверен, что я не должен знать этих людей или все эти вещи, чтобы создать таблицу с динамическими данными. Давай вернемся к React. Как я могу извлечь данные с сервера в React?

— Ну, на самом деле для выборки данных не надо React, он отображает данные.

— О, черт. Так а что используется для выборки данных?

— Используй Fetch для получения данных с сервера.

— Использовать Fetch для выборки данных? Тот, кто называет эти вещи, нуждается в тезаурусе.

— О, да. Fetch это имя нативной реализации для выполнения XMLHttpRequests.

— О, AJAX.

— AJAX это просто запросы XMLHttpRequest. А Fetch позволяет делать AJAX на основе промисов, которые затем можно резолвить, чтобы избежать callback hell.

— Callback hell?

— Да. Каждый раз, когда выполняется асинхронный запрос, ты должен ждать его ответа, который заставляет добавить функцию внутри функции, которая называется пирамида callback hell.

— О, хорошо. А промисы решают эту проблему?

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

— И это можно сделать с помощью Fetch?

— Да, но только в некоторых браузерах, в противном случае необходимо включить Fetch polyfill или использовать Request, Bluebird или Axios.

— Сколько библиотек мне нужно знать, ради бога? Сколько из них?

— Это JavaScript. Тут тысячи библиотек, которые делают одно и то же. Мы знаем эти библиотеки. Наши библиотеки огрооооомные, а иногда мы добавляем картинки с Guy Fieri в них.

— Guy Fieri? Давай покончим с этим. Что эти Bluebird, Request и Axios делают?

— Это библиотеки для выполнения XMLHttpRequests, которые возвращают промисы.

— А методы AJAX JQuery не возвращают промисы?

— Мы больше не используем «J» в 2016. Просто используйте Fetch polyfill или Bluebird, Request или Axios. Затем управляй промисами с async, await и Бац!, у тебя правильный поток управления.

— Это третий раз, когда ты говоришь о await, но я понятия не имею, что это такое.

— Await позволяет блокировать асинхронный вызов, что позволяет лучше все контролировать во время получения данных и увеличивает читаемость кода. Это потрясающе, просто нужно, чтобы убедиться, что ты добавил stage-3 в Babel, или использовать синтаксис асинхронных функций и плагин transform-async-to-generator.

— Это безумие.

— Нет, безумие — что нужно перекомпилировать код TypeScript, а затем транспайлить его с Babel, чтобы использовать await.

— Шта!? Это не входит в TypeScript?

— Входит в следующей версии, но в версии 1.7 он только ES6, так что если хочешь использовать await в браузере, сначала нужно скомпилировать код TypeScript в ES6, а затем транспайлить с Babel в ES5.

— Я не знаю, что сказать.

— Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.

— У нас очень разные определения «легко». Так, с этим ритуалом я, наконец, получил данные и теперь я могу показать их с помощью React правильно?

— А приложение будет обрабатывать любые изменения состояния?

— Грр, я не думаю. Мне просто нужно отобразить данные.

— О, слава богу. В противном случае мне пришлось бы объяснить Flux и реализации, такие как Flummox, Alt, Fluxible. Хотя, если быть честным ты должен использовать Redux.

— Как же достали эти имена. Опять же, мне просто нужно отобразить данные.

— А, если просто отобразить данные, не надо начинать с React. Можно взять движок шаблонов.

— Ты шутишь, что ли? Думаешь, это смешно?

— Да я просто объяснил, что ты мог бы использовать.

— Стоп. Просто остановись.

— Я имею в виду, даже если просто использовать шаблонизатор, я бы все равно использовал комбо TypeScript + SystemJS + Babel на твоем месте.

— Мне нужно отобразить данные на странице, а не выполнить оригинальный фаталити Sub Zero из Мортал Комбат. Просто скажи мне, какой движок шаблонов использовать.

— Их много, с каким ты знаком?

— Уф, не могу вспомнить название. Это было давно.

— jTemplates? jQote? PURE?

— Не то. Еще один?

— Transparency? JSRender? MarkupJS? KnockoutJS?

— Другой

— PlatesJS? JQuery-tmpl? Handlebars? Некоторые люди до сих пор используют его.

— Может быть. А есть что-то похожее на последний?

— Mustache, underscore? Я думаю, что теперь даже у lodash есть шаблонизатор, но это своего рода 2014.

— Грр… возможно он был поновее.

— Jade? DustJS?

— Нет.

— DotJS? EJS?

— Нет.

— Nunjucks? ЕСТ?

— Нет.

— Чувак, никто не любит синтаксис CoffeeScript в любом случае. Jade?

— Нет, ты уже сказал Jade.

— Ну я имел в виду Pug. Я имел в виду Jade. Я имею в виду, Jade теперь Pug.

— Пф. Нет. Не помню. Какой из них ты бы использовал?

— Наверное, нативный ES6 template strings.

— Дай угадаю. Это требует ES6.

— Да.

— Который, в зависимости от того, какой браузер я использую требует Babel.

— Да.

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

— Да.

— Который, требует Browserify или Wepback, или, скорее всего, SystemJS.

— Да.

— Который, если это не Webpack, в идеале должен управляться Task runner-ом.

— Да.

— Но, так как я должен использовать функциональное программирование и типизированные языки, я в первую очередь должен предварительно скомпилировать TypeScript или добавить этот Flow.

— Да.

— А потом отправить это на обработку в Babel, если я хочу использовать await.

— Да.

— Так что я могу затем использовать Fetch, промисы и управление потоком и всю эту магию.

— Только не забудь polyfill Fetch, если он не поддерживается, Safari до сих пор не может справиться с этим.

— Знаешь что. Я думаю, мы закончим здесь. На самом деле, я думаю, я закончил. Я закончил с этим вебом и с JavaScript в целом.

— Хорошо, через несколько лет мы все будем кодить в Elm или WebAssembly.

— Я просто хочу вернуться к бэкэнду. Я не могу справиться со всеми этими изменениями, версиями, изданиями, компиляторами и транспайлерами. Сообщество JavaScript безумно, если оно думает, что кто-то может идти в ногу с этим.

— Понятно. Тебе тогда надо попробовать сообщество Python.

— Почему?

— Слышал о Python 3?

habr.com

Как учить JavaScript — I'm ZHAROV

«Javascript is to programming what jazz is to music.»

Markus Persson

Эта статья о том как я изучал/продолжаю изучать замечательный язык JavaScript. Думаю объяснять для чего учить JavaScript нет необходимости, достаточно прочитать статью «Актуальные технологии и тренды в веб-разработке».

Начал с курса по JavaScript на codecademy.com, прошел примерно половину, параллельно начал изучать основы на learn.javascript.ru, удобнее купить книгу в epub/pdf learn.javascript.ru/ebook.

После этого начал читать книгу «Выразительный Javascript» автор: Marijn Haverbeke (karmazzin.gitbooks.io) (upd: прочитал 7 разделов из 22).

Потом переключился с codecademy.com на отличный сервис для изучения freecodecamp.com, прошел разделы: «Basic JavaScript», «Object Oriented and Functional Programming», начал проходить «Basic Algorithm Scripting» (upd: прошёл 3 из 7).

Начинал читать «JavaScript. Подробное руководство» автор: Дэвид Флэнаган (ozon.ru), понял, что на данном этапе для меня это скорее справочник, решил искать дальше. Наткнулся на курс по JavaScript на hexlet.io все объясняется очень доходчиво, курс опирается на книгу «JavaScript. Сильные стороны» автор: Дуглас Крокфорд (ozon.ru) и на его лекции, хорошо после просмотра курса прочитать эту книгу (upd: прочитал 43 страницы из 173).

Сейчас есть идея пройти курс «JavaScript/DOM/интерфейсы» у Ильи Кантора (learn.javascript.ru/courses).

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

Множество полезных ресурсов можно почерпнуть из первой записи блога «Как стать классным фронтенд-разработчиком» (kirillzharov.ru/how_to_become_cool_front-end_developer), подборка курсов, книг для изучения, статей, видео по JavaScript по ссылке kirillzharov.ru/frontend.

Статья основана лично на моём опыте изучения JavaScript и не претендует на единственный оптимальный вариант, она будет пополняться в процессе изучения.

Буду рад, если в комментариях поделитесь своим опытом изучения JavaScript и поделитесь полезными ссылками!

kirillzharov.ru

Как изучать и использовать JavaScript с удовольствием: нюансы разработки

От автора: еще пару месяцев назад я не мог смотреть на JS без нервов. Я на 100% устал от JS и не мог выйти из этого состояния. Оно продолжалось много лет. Сегодня я люблю использовать JavaScript и его экосистему. Что произошло?

Я использовал JS в той или иной форме с 90-ых. У меня есть книги, которые сейчас смотрятся довольно смешно. В них полно выражений document.write.

За последние пару лет JS сильно изменился. Поначалу я не успевал изучать все эти изменения. Я не мог принять столько много нового за раз. JS менялся, я же сопротивлялся. Я так долго его учил, а он вдруг стал меняться.

Я нашел комментарий в популярной статье «Modern JavaScript Explained For Dinosaurs». Там говорилось, что «изучать современный JS очень сложно, если не делать это с самого начала»:

«Я бы сказал, что учить с самого начала (да, я «такой» старый) еще сложнее — Tim Tate»

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В 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. Это стабильные технологии. Учите их, они останутся надолго, слишком надолго (и не уйдут).

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

Примите тот факт, что все приходит и уходит

У всего есть жизненный цикл.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Пару лет назад везде использовали 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.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

webformyself.com

Комплексное обучение Javascript - Видеоуроки

Комплексное обучение Javascript

Duration 39:28:15

Открыть все курсы от loftschool

Комплексное обучение Javascript - Полный список уроков

Развернуть / Свернуть

Урок 1. Введение в web технологии 02:06:32
Урок 2. Функции 02:23:04
Урок 3. Обработка ошибок и отладка 02:32:23
Урок 4. Структуры данных 0 00:04:44
Урок 5. Структуры данных 1 02:05:13
Урок 6. Ответы на вопросы 01:47:11
Урок 7. DOM 02:40:50
Урок 8. События 02:32:37
Урок 9. Aсинхронность 03:03:23
Урок 10. Aсинхронность практика 01:05:28
Урок 11. BOM 01:47:09
Урок 12. API Платформы 02:23:37
Урок 13. API Браузеры HTML 5 02:44:18
Урок 14. Практика 01:40:23
Урок 15. ООП 02:34:24
Урок 16. MV разновидности 01:59:41
Урок 17. Практика 00:40:46
Урок 18. Модули продвинутый уровень 02:15:31
Урок 19. Введение в NodeJS 02:04:40
Урок 20. Angular 00:56:21

Добро пожаловать на курс, который должен сделать с вас опытного программиста на JavaScript. Во всех уроках атор курса постарается рассказать и показать вам о всех возможностях javascript, которые вам пригодятся в современной веб-разработке. Этот курс предполагает что у вас уже есть хоть минимальный опыт работы с javascript, так как он рассчитан на более продвинутых пользователей.

Твоя оценка

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Курс JavaScript/DOM/интерфейсы

Первая часть курса

Основной JavaScript.
Здесь мы изучим сам язык, его конструкции и особенности, которые позволяют "разговаривать" на JavaScript коротко, понятно, а главное - без ошибок.
- IDE, настройка, полезные приёмы использования, средства для автопроверки кода.
- Основные структуры данных, работа с числами, строками, датами, массивами, объектами.
- Инструменты разработки, отладка в браузерах.
- Автоматизированное тестирование, инструменты и их применение.
- Современный стандарт ES-2018, его кросс-браузерное использование сейчас.
Более глубокое понимание языка.
Чтобы писать хороший код, а также грамотно пользоваться современными фреймворками, мы изучим JavaScript лучше, включая тонкости и продвинутое применение языковых конструкций.
- Замыкания и их грамотное применение.
- Внутреннее устройство движка JavaScript.
- Контекст this в деталях.
- Форвардинг, одалживание и делегирование функций.
- Прототипы, классы, прототипное и функциональное ООП, детали использования.

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

Вторая часть курса

Документ, генерация интерфейса.
Здесь мы учимся работать с документом, решать всевозможные задачи в браузере.
- Внутреннее устройство браузера, оптимальная организация страницы со скриптами.
- Дерево DOM, особенности разработки в современных браузерах с отмирающей, но иногда нужной поддержкой старых.
- Динамическая генерация интерфейса - методы DOM, их грамотное использование.
События, взаимодействие с посетителем.
- Основы и тонкости работы с различными событиями для решения основных интерфейсных задач.
- Drag'n'Drop, по окну и внутри элемента
- Паттерн "делегирование", оптимизация производительности и архитектуры, чтобы интерфейсы не тормозили.
- Объектно-ориентированная разработка, компонентная архитектура с использованием ООП, событий и DOM.
AJAX
- Общение с сервером при помощи XMLHttpRequest.
- Использование Promise для асинхронных цепочек вызовов.

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

Третья часть курса

Сборка кода.
- Node.JS как средство запуска полезных утилит.
- Организация скриптов, стилей и других компонентов проекта на диске.
- Шаблонизация, системы организации шаблонов и детали их работы.
- Современные технологии Frontend-сборки, Webpack.
Архитектура сложных интерфейсов.
- Взаимодействие компонент через события и не только.
- Проекты с большим количеством компонент.
Куда дальше?
- Обзор фреймворков (AngularJS, React.js), куда двигаться дальше.

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

learn.javascript.ru

Готовимся к изучению javascript

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

Все мои записи в этой рубрики рассчитаны на абсолютного новичка, не знающего ничего, кроме базового уровня html и css, который вы можете пройти у меня на блоге в соответствующей рубрике.

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

Что нужно для изучения языка программирования javascript для веб

Первое и самое основное конечно же желание
Наличие компьютера или ноутбука
Установленный браузер (желательно Chrome)
Простой редактор кода (предпочитаю Notepad++)

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

Хочу также заметить, что здесь совершенно не важно на какой ОС вы будете работать, будь у вам MAC, Windows или даже Linux вы без проблем сможете проходить изучение этого языка программирования. Еще одной хорошей новостью есть тот факт, что вне зависимости от вашего возраста, образования и пола, каждому из вас доступен этот язык, главное желание и время на обучение.

Как проходить обучение javascript

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

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

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

sozdaj-sam.com

Комплексное обучение Javascript - Видеоуроки. Учить javascript

Как изучить JavaScript быстрее.

1. Не позволяйте будущим решениям останавливать вас от развития сейчас

2. Не позволяйте себе забывать то, что уже изучили

3. Подходите к практике правильно

4. Найдите время для программирования, используя Facebook трюк

5. Думайте медленнее и вы будете изучать быстрее

6. Пишите сложный код простым языком

Заключение

Каково оно учить JavaScript в 2016 / Хабр

Как учить JavaScript — I'm ZHAROV

Как изучать и использовать JavaScript с удовольствием: нюансы разработки

Построение всего

Используйте простейшие альтернативы

Больше никаких огромных релизов

Игнорируйте шум

Новые фреймворки не выходят каждую неделю

Примите тот факт, что все приходит и уходит

Вы не так глупы, чтобы использовать jQuery

Вам не нужно знать все. Найдите баланс

Изучайте технологии с user-friendly документацией

JavaScript снова изменится

Учите основы и ищите свой путь

Путешествие только началось

Фреймворк VUE JS

Комплексное обучение Javascript - Видеоуроки

Комплексное обучение Javascript - Полный список уроков

Твоя оценка

Комментарии

Похожие курсы

Курс JavaScript/DOM/интерфейсы

Первая часть курса

Вторая часть курса

Третья часть курса

Готовимся к изучению javascript

Что нужно для изучения языка программирования javascript для веб

Как проходить обучение javascript