Введение в JavaScript
Этот пост посвящён главному языку будущего - JavaScript. Благодаря своей гибкости используется в браузере, на серверах, в мобильных приложениях, на десктопе и практически во всех видах программирования. Удобный синтаксис позволяет легко писать на нём, а высокая производительность делает его отличным выбором для решения любых задач - от небольших магазинов до огромных highload проектов. JavaScript по праву является самым популярным в мире языком. На каждом сайте есть браузерный JavaScript, а JavaScript на сервере используется такими крупными корпорациями, как Amazon, Yahoo, HP, NASA, Walmart и многие другие.
Часто задаваемые вопросы
В: Что это за язык такой?
О: Мультипарадигменный язык, изначально создавался для использования в браузерах как язык сценариев для придания интерактивности веб-страницам, однако в процессе своего развития преодолел этот этап и сейчас может использоваться для любых целей ввиду своей неограниченной гибкости и удивительно удобного синтаксиса. Сочетает в себе особенности объектно-ориентированного, функционального, событийно-ориентированного, декларативного и императивного программирования. Объектно-ориентированная часть реализована через прототипирование. В последних стандартах язык сделал большой шаг в сторону функционального программирования.
В: Какие возможные направления для разработки существуют?
О: Практически все! Можно писать Front-end, Back-end, GameDev, 2D/3D графику, разрабатывать мобильные и десктопные приложения. Список инструментов для различных целей
В: Можно выучить только один фреймворк/библиотеку и всё писать на нём?
О: Не стоит начинать учить отдельный фреймворк или библиотеку, пока отсутствуют базовые знания самого языка. Во-первых, из-за отсутствия знаний самого языка возникнет масса проблем с пониманием принципа работы фреймворка/библиотеки, во-вторых, этим можно сильно испортить себе восприятие языка и после этого будет гораздо сложнее изучать чистый JS и другие фреймворки.
В: Существуют ли стайл-гайды для JavaScript?
О: Да. Стайл-гайд для Node.js, стайл-гайд для Front-end
В: Какие новые возможности добавил ES6?
О: Вот здесь можно почитать на русском
В: Я хочу писать на ES6, но многие браузеры не поддерживают новые возможности. И вообще, надоел геморрой с браузерным зоопарком. Неужели нет способа обойти это?
О: Конечно есть! Чтобы код одинаково хорошо работал во всех браузерах и все возможности ES6 и будущих стандартов нормально работали необходимо собрать код с помощью сборщика. Сборщик компилирует весь код в один файл и делает его полностью кроссбраузерным. Наиболее удобен в использовании Webpack, хотя существуют и аналоги. Потребуется некоторое время на изучение, но результат себя окупит. Сборщики нужны только во Front-end, Node.js и так поддерживает все новые возможности.
В: Зачем нужны CoffeeScript и TypeScript?
О: Это особые варанты JS для любителей других языков. CoffeeScript подходит для любителей Ruby и Python, TypeScript - для сторонников строготипизированных языков вроде C# или Java. Если ты новичок в программировании, то учи оригинал, а диалекты попробуешь, когда уже будет опыт.
В: Зачем нужны таск-раннеры, такие как Gulp или Grunt?
О: Они позволяют одной консольной командой запустить выполнение заранее прописанного процесса, который может содержать множество команд и который неудобно каждый раз выполнять вручную. Пример - компиляция JS с помощью Webpack, сборка LESS стилей в CSS и многое другое. Ещё раз - таск-раннер не замена сборщику, Gulp - не конкурент Webpack, они выполняют совершенно разные задачи и зачастую используются вместе.
В: Можно ли писать фронт на других языках?
О: Да, существуют компиляторы различных языков в JS, такие как ScalaJS, PyJS и другие. Но стоит помнить, что у них есть масса недостатков и использовать их стоит только если на чистом JS (также CS и TS) не получается писать совершенно. Они предназначены прежде всего для тяжёлых приложений вроде браузерных 3D игр в классических Front-end целях не очень удобны.
В: Я слышал про какой то WebAssembly, который заменит JS. Это правда? Что это такое?
О: Нет, неправда. WebAssembly (WASM) практически не имеет отношения к классическому Front-end. Это особая технология, позволяющая выполнять в браузере бинарный код, компилируемый из различных языков. Он предназаначен для выполнения в браузере тяжёлых приложений вроде трёхмерных онлайн-игр и никак не связан с привычными задачами JS. Более того, учитывая развитую инфраструктуру JS, множество фреймворков и библиотек на все случаи жизни, большое количество профессиональных разработчиков, огромное количество легаси-кода, выполнение WASM иных задач, не связанных с различными высокопроизводительными трёхмерными приложениям, видится невозможным. Кроме того, WASM не затрагивает серверную и мобильно-десктопную часть JavaScript, которые уже успели стать довольно популярными.
В: С чего начать изучение?
Материалы для изучения
Книги про JavaScript
Марейн Хавербек - "Выразительный JavaScript" — Вводная книга по JavaScript и программирование в целом.
Онлайн на русском | Онлайн на английском
Дэвид Фленеган - "JavaScript: Подробное руководство"
Дуглас Крокфорд "JavaScript: сильные стороны"
Стефанов С. - "JavaScript. Шаблоны"
Джон Резиг - "Секреты JavaScript ниндзя"
Николас Закас - "JavaScript. Оптимизация производительности"
Джон Резиг, Расс Фергюсон - "JavaScript для профессионалов"
Dr. Axel Rauschmayer - "Speaking JavaScript: An In-Depth Guide for Programmers"
Онлайн на английском | PDF на английском
Discover Meteor — Книга по Meteor.js - одному из самых лёгких и функциональных фреймворков.
Node.js
М. Кантелон , М. Хартер - "Node.js в действии"
PDF русском | Материалы к книге
Кирилл Сухов - "Node.js. Путеводитель по технологии"
Дэвид Хэррон - "Node.js. Разработка серверных веб-приложений"
Front-end
Тодд Мотто - "Учебник AngularJS"
Онлайн на русском | Онлайн на английском
Max P - "Курс по React.js для начинающих"
Эдди Османи - "Разработка Backbone.js приложений"
Эрл Каслдайн, Крэйг Шарки - "Изучаем JQuery"
Адам Фримен - "jQuery для профессионалов"
И не забываем читать официальную документацию для каждого фреймворка.
Онлайн сообщества
learn.javascript.ru - Самый главный русскоязычный сайт по JavaScript. Других таких подробных уроков не найти. Начинать строго с него.
node-center.ru - Второй по важности сайт. Ориентирован на Node.js, но мелькает материал и по Front-end. Сборник всей нужной информации, перевод официальной документации, список книг и ссылок.
jstherightway.org - Огромный англоязычный гайд. Есть книги, статьи, список фреймворков и многое другое. По сути, этот текст - краткий аналог этого гайда.
nodeguide.ru - Большое количество переведённых статей по Node.js
Блоги и новостные ленты
dailyjs.com - DailyJS
weblog.bocoup.com - Bocoup Weblog
perfectionkills.com - Perfection Kills
reddit.com/r/javascript - subreddit на reddit.com
toddmotto.com - Todd Motto, Lead front-end @appsbroker. Developer Expert @google.
Онлайн курсы
Изучая только теорию язык усваивается плохо. Наиболее важна практика, которую можно получить на онлайн-курсах.
CodeSchool
Отличный ресурс для изучения языка, очень много курсов по всем передовым технологиям.
CodeAcademy
Уже не такой сильный, но все еще интересный проект, также обязателен для улучшения навыка.
Udacity
Дает хорошее представление о замыканиях.
Прошёл курсы, прочитал книги и думаешь, что знаешь JS? Теперь изучи тонкости и особенности языка. Сделать это можно здесь - https://shamansir.github.io/JavaScript-Garden/
Список инструментов для различных целей
Front-end: jQuery, Angular, React, Backbone(ru), Meteor(ru)
Back-end: Node.js(ru), Express, Koa, Sails, Total, Strapi, Hapi
Десктопные приложения: NW.js, Electron, WinJS
Мобильные приложения: Cordova, NativeScript, React Native, Phonegap, Ionic
GameDev: Phaser, Cocos, Pixi, Unity, Atomic Game Engine
Тестирование: Mocha, Chai, Jasmine, Sinon, Karma
Continuous Integration: Semaphore, Shippable
Auto deploy: Sanelotto, ShipIt, Fabric, Capistrano
CMS: KeystoneJS, PencilBlue, Apostrophe, Ghost
Генераторы статичных сайтов: DocPad, Metalsmith, Harp, Brunch
Imageboard engine: Hanako, Doushio, live4chan
Бесплатные хостинги: OpenShift, Heroku
IDE/редактор: WebStorm, Atom, Brackets