Топ JS-фреймворков, которые стоит изучить в 2017

Популярность JavaScript привела к большому разнообразию фреймворков, библиотек и технологий. Но вместе с ним пришла и сложность понимания для многих. Какие же технологии стоит знать?

На что стоит потратить своё время? Что даст наибольшую выгоду? Какой стек технологий требуется компаниям? И у каких технологий наибольший потенциал?

JavaScript и Основы DOM

Перед тем как начать искать работу, стоит изучить основы:

  • ES6: текущая версия JavaScript – ES2016 (или ES7), но большинство разработчиков до сих пор толком не изучили ES Самое время)
  • Методы: изучить функции языка для работы с основными типами данных (особенно массивами, объектами, строками и числами)
  • Функции и чистые функции: скорее всего Вы думаете, что знаете большинство функций JavaScript, но в языке очень много полезной магии, на которую стоит обратить внимание. Если собираетесь писать в функциональном стиле, узнайте о чистых функциях
  • Замыкания: посмотрите как ведёт себя окружение функции
  • Callback: callback это функция, которая используется другой функцией, чтобы сообщить о результате
  • Обещания: обещание(promise) – метод работы с будущими значениями. Когда функция возвращает обещание, вы можете прикрепить к нему callback-и, используя метод .then(), который выполнится в случае разрешения обещания. Результат будет передан в callback. Например так: doSomething().then(value => console.log(value));
const doSomething = (err) => new Promise((resolve, reject) => {
  if (err) return reject(err);


  setTimeout(() => {
	resolve(42);
  }, 1000);
});


const log = value => console.log(value);


// Using returned promises
doSomething().then(
  // on resolve:
  log, // logs 42
  // on reject (not called this time)
  log
);


// remember to handle errors!
doSomething(new Error('oops'))
  .then(log) // not called this time
.catch(log); // logs 'Error: oops'
  • Ajax и вызовы серверного API: используемые в реальности приложения работают с серверной частью. Нужно уметь работать с API
  • Классы
  • Функциональное программирование: возвращайтесь к основам
  • Генераторы и async/await: наилучший подход это писать асинхронный код, который выглядит синхронным. Такой код лучше ситается.
  • Производительность
  • Progressive Web Applications (PWA)
  • NodeJs и Express: NodeJs позволяет использовать JavaScript на сервере. Express – наиболее популярный фреймворк для NodJs
  • Lodash

Инструменты

  • Инструменты разработчика Chrome: во всех современных браузерах есть инструменты разработчика, которые позволяют работать с DOM и дебажить JS
  • Npm: репозиторий библиотек для JavaScript с открытым исходным кодом
  • Git и GitHub: система контроля версий
  • Babel: нужен для компиляции ES6, чтобы работал со старыми браузерами
  • WebPack: самый популярный инструмент для сборки бандлов и оптимизации модулей JavaScript и других ресурсов для фронтенда
  • Atom, VSCode, или WebStorm + vim: понадобится IDE
  • ESLint: отлавливайте синтаксические ошибки. Хороший инструмент для уменьшения количества ошибок в коде
  • js: еще одна болезная утилита для работы с кодом. Автокомплит, подсказка типов и т.п.
  • Yarn: схож с npm
  • TypeScript: статическая типизация в JS. Если вы не используете Angular2, стоит быть аккуратнее с TypeScript. Нужно рассмотреть компромисы.
  • Flow: проверка типов для JavaScript

React

React это JavaScript библиотека для построения пользовательского интерфейса, разработанная в Facebook. Она основана на идее  однонаправленного потока данных. Это означает следующее:

  • React обновляет DOM, если данные изменились. Изменение данных на этом шаге не могут перезапустить перерисовку до следующей итерации.
  • Обработка событий – после отрисовки DOM, React слушает события и передаёт обработку единому корневому слушателю
  • Переход к первому пункту

Это противоположность двусторонней привязке, где изменения DOM могут напрямую изменить данные (как например, Angular и knockout). В этом случае изменение DOM во время процесса отрисовки может спровоцировать еще одну перерисовку, пока предыдущая не закончилась. Что приведёт к малой производительности.

React не регламентирует систему управления данными, но Flux-подход – лучший выбор.

  • create-react-app:самый быстрый способ для начала работы с React
  • react-router: роутинг для React
  • Next.js: универсайльный рендер и роутер для Node и React
  • velocity-react: анимация

Redux

Redux даёт транзакционное и предопределённое изменение состояния вашего приложения. В Redux происходит итерационное изменение состояния с целью приблизится к текущему состоянию приложения. Для начала, обратите внимание на пару курсов от создателя Redux:

Redux обязателен для изучения, т.к. даст достаточно опыта, научит вас писать чистые функции и использовать reducers. Reducers нужны для обхода коллекций и выборки нужного значения из неё. Reducers на столько удобны, что метод Array.prototype.reduce был включен в спецификацию языка.

  • redux-saga – I/O библиотека

Angular 2

Angular 2 следующая версия очень популярного JavaScript фреймворка Angular от Google. Из-за популярности, строчка с Angular очень круто смотрится в резюме, но стоит начать с React.

У React есть пара преимуществ перед Angular:

  1. он проще
  2. он не менее популярен

RxJS

RxJS это набор реактивных утилит для JavaScript. Рассматривайте его как Lodash для потоков. Реактивное программирование официально выходит на JS арену.

Только аккуратнее с импортом. Если подключите всё что есть, проект раздуется до нереальных размеров. Импортируйте только то, что нужно.

import { Observable } from 'rxjs/Observable';
// then patch import only needed operators:
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';


const foo = Observable.from([1, 2, 3]);
foo.map(x => x * 2).subscribe(n => console.log(n));

Также обратите внимание на следующие фреймворки

  • У Vue.js куча звёзд и скачиваний на GitHub. Если так пойдет и дальше, то в 2017м у него всё будет очень даже хорошо, но до React и Angular этому фреймворку всё равно далеко.
  • MobX система управления данными, которая выступает в роли альтернативы Redux. Тоже развивается очень быстро, так что в 2017 очень пригодится.


Комментарии

добавить
Комментариев пока нет. Будете первым?
Чтобы комментировать, нужно авторизоваться

Советуем почитать


Топ-10 фреймворков, на которые стоит обратить внимание в 2018
Администратор 0

Топ-10 фреймворков, на которые стоит обратить внимание в 2018 читать далее

Со спросом на web приложения растёт спрос на высокоуровневые фреймворки. И как результат, выбор подходящего фреймворка становится кошмаром для разработчика. Вот я и подумал, что не плохо было бы сделать подборку 10 фреймворков для web разработки, которые идеально подойдут вашему проекту.

0 28.01.2018 17:36:16

Почему стоит изучать Ruby on Rails
Администратор 0

Почему стоит изучать Ruby on Rails читать далее

Вы начинающий программист? Или просто думаете какой бы язык изучить? Очень рекомендуем вам обратить внимание на Ruby on Rails. Не смотря на обилие языков программирования и доступных фреймворков, Ruby on Rails очень популярен среди web-разработчиков. Всё благодаря функционалу и скорости разработки.

0 28.01.2018 17:12:42

Vue.js
Сергей 0

Vue.js читать далее

Если Вы никогда не слышали или не использовали Vue.js, то скорее всего скажете: «Да ладно, еще один JavaScript фрэймворк». Ясно-понятно. Но Vue.js не еще один. Первый релиз был в 2013 и сейчас у него на GitHub 38K+ звёзд и почти 5 тысяч форков.

0 04.01.2017 23:39:03