Недавно наткнулся на одно видео, где была информация о том, что нужно знать web-разработчику в 2016-2017 году. Решил поделиться с вами. Видео в самом конце (на инглише). Ниже текстовая сокращенная версия с моими комментариями (в виде цитат).

Для тех кто не любит видео-формат или не может в инглиш.

TL; DW (краткий пересказ):

В видео есть 3 ветки:

1) Не зависимо от того back-end или front-end

2) Front end

3) Back end

Первая ветка. Включает в себя такие вещи:

- FTP и работа с хостингом (залить, выгрузить, работа с cPanel и т.д.)

- Терминал (командная строка)

- SSH

- Основы GitHub

- Как происходить связь между клиентом(юзером) и сервером

- RESTful

Вторая ветка. Начнем с основ для фронта:

- Текстовый редактор

Автор выделил 3: Atom, Sublime, Brackets.

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

Большой разницы при выборе редактора нет. Так что особо заморачиваться не стоит.

- HTML

- CSS

- JS

В видео автор утверждает, что jQuery учить необязательно и можно сосредоточиться на родном JS и дальше уйти во фреймворки.

Я все-таки не соглашусь. jQuery все еще остается самой популярной библиотекой на JS (jQuery не фреймворк). При этом jQuery очень легкая в изучении и имеет просто тонны документации (и горы мусорных обучалок на Youtube).

Дальше идет продвинутый фронт:

1)ES6/ES2015 (Babel)

Как и любой язык JS (ECMA-Script) не стоит на месте. Если руки чешуться уже писать на ES6 (ибо var, let, const и еще много фич) то Babel (преобразователь ES6 в ES5) в помощь.

2)CSS инструменты.

-Препроцессоры (SASS/LESS/Stylus)

-CSS фреймворки (Bootstrap/Foundation)

-Адаптивный дизайн в CSS

CSS - не является языком программирования. Там нет (на данный момент) переменных, функций и т.д. Таким образом поддерживать CSS в проекте становиться довольно сложно. Да и писать его руками - долго и нудно. Тут нам на помощь и приходят препроцессоры. Они добавляют возможность использовать переменные в CSS и писать небольшие функции чтобы в последствии сэкономить время при написании CSS для проекта.

Самые банальные примеры использования препроцессоров. Переменные. Загнали цвета в переменные. И если вдруг, дизигнеру придет в голову сделать серый-черным. Вы просто меняете значение переменной. И вуаля у вас во всем проекте серый стал черным. Функции. Использовать функции можно очень разнообразно. Но начнем с простого. Чтобы не писать все префиксы для box-shadow, transition и других CSS3 фич можно использовать функции (mixin). Пишеться функция, которая принимает значение, например: "transition: all .4s ease" и выдает это же значение, только с бразуерными префиксами.

Еще стоит отметить, что есть SASS, а есть SCSS. Разница? Только в синтаксисе. В SASS нет скобок "{}". Совсем нет. И это многих смущало посему появился SCSS.Тот же SASS только со скобками и более приближенным к CSS синтаксисом. Отличие не только в скобках, но это основное.

3)Интсрументы сборки

-Таск ранеры

Gulp и Grunt. Самые популярные. Каждый выберет то что любит больше. Лично я фанат Gulp.

Что такое таск ранеры? Это такая полезная вещь, которая позволяет настроить автоматизированные задания (таски). Простые примеры: компиляция SASS|LESS в CSS сразу после того, как файл SASS|LESS был сохранен. Т.е. ctrl+s - упаковнный CSS. Можно пойти еще дальше и сразу сделать минимизированный CSS. Т.е. пишется еще таск и после упаковки с SASS|LESS идет следующий таск который минимизирует CSS. Такая же история с JS и даже HTML (Jade). Кроме того можно написать таски на тесты (Mocha|Karma). Штука классная, но нужно посвятить время.

-Управление зависимостями

Browserify и Webpack. Webpack ваш выбор. Он популярнее. Его любят больше. Я даже видео по нему запилил.

Да, Webpack - классная штука. Такая же история как с тасками. Потратил время на обучение, попробовал повторить туториалы, написал свое, оптимизировал, доволен как слон. Потом опять переписал или дописал. И опять доволен как слон. (2 последних шага повторяются время от времени)

-Bower, Yeoman

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

4)MV* фреймоврки

Если пишеться SPA (Single Page Application), т.е. вовлекаются сотни, тысячи строк кода на JS, то нужен фреймворк, чтобы их организовать. Знакомиться стоит с четырьмя:

-React

-Angular

Angular 2 как бы вышел. Многие недовольны резким смещением от Angular1 к Angular2. Многие сидят на Angular1. Многие не уверенны лучше ли Angular2.

Angular2 в концепции очень сильно отличается от Angular1. Кроме того, в Angular2 нет обратной совместимости с Angular1. т.е проект написанный на Angular1 нельзя просто "обновить" до Angular2. Мигрировать можно. Просто крайне муторно. Мне самому пока не доводилось.

-Ember

Используется для больших приложений и работы с большим объемом данных.

-Vue

Для маленьких и легких приложений. Но и React для таких приложений тоже хорош.

Также стоит отметить Polymer и Aurelia. Но они не должны входить в основу вашего набора разработчика.

Если хочется сосредоточиться на изучении одного, несомненно, - это React. В мире React за последний год случилось много всего. Сузим это до:

-Mobx

Самый простой способ начать написание React-приложения. Используется для маленьких приложений.

-Flux

Далее рекомендую выучить Flux. Зная Flux проще разобраться в Redux, Relay. Множество этих микрофреймворков под React берут основу именно у Flux.

-Redux

Стоит использовать, если ваше приложение набирает размер и имеет сложные взаимодействия с данными.

-Relay

Для, ну очень, больших приложений. Если бы нужно было сделать Gmail на React ябы делал это на Relay.

-create-react-app

Простой способ развернуть React-приложение.

Если хочется чего-то интересного:

-Closurescript

-Elm

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

Юнит тестирование

-Mocha

-Jasmine

-Karma

-Enzyme

Enzyme - кассная вещь для использования вместе с предыдущими тремя. Под React.

Все учить не надо. Придя на продвинутый уровень с базовыми знаниями HTML-CSS-JS, сперва выучите CSS фреймворки и препроцессоры. Далее выберите JS фреймворк (React) и учите понемногу что-то новое.

Третья ветка. Back-end.

Есть скриптовые языки, функциональные языки, высокопроизводительные языки.

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

-NodeJS (express^, hapi^)

-Python (django, flask^)

-Ruby (Ruby on Rails, Sinatra)

-PHP (Laravel, Symphony2, Lumen^)

Фреймоврки с ^ - микрофреймворки. Меньше, легче в изучении.

Если бы мне сказали выделить один, то я бы выделил все-таки NodeJS. Почему? Скорее всего вы уже знаете немного JS и он крут.

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

Функциональные:

-Elixir

-Scala

-Haskell

-Clojure

Высокопроизводительные:

-Go

-Rust

-Java

-C#

NodeJS - Haskell - Go/Rust. Я бы начинал так. Я выделил Java и C# другим цветом потому что они не для новичков. Да, там много возможностей работы, но новичкам, я бы рекомендовал начать со скриптового языка.

Что знать (вне зависимости от языка):

-Юнит/Функциональное тестирование

-RESTful API принципы. Как его написать.

-Защита

-Авторизация (OAUTH2, JSON Web Token)

-SOA (Services Oriented Architecture) / Microservies

-Развретывание приложения (Flightplan: nodejs / Fabric: python / Capistrano: Ruby)

-Websocket

-ORM/ Data structure

Работа с данными (базы данных):

-MySQL, PostgreSQL (реляционные)

-Redis (сессия, кеширование)

-MongoDB, Couchbase, RethinkDB (noSQL базы данных)

-Solr, Elastic Search (базы данных под поисковые системы)

Кеширование

-Nginx

-Apache

-Redis

-In-memory

Далее идет DevOps

Веб-платформы:

-Digital Ocean

-Amazon Web Services

-Azure

-Rackspace

-Heroku

Упралвение сервером:

-Linux

-Docker

-Ansible

-Salt

-Chef

-Puppet

Docker - это то, что вы абсолютно точно захотите знать. Если вы решили изучть одну технологию как DevOps учите Docker. Немного знакомы с Docker? Выучите его хорошо.

- Большой масштаб (Kubernetes, Mesos)

- Малый масштаб (Docker Swarm)

- С графическим интерфейсом (Rancher, Docker Cloud, Docker Datacenter/Universal Control Plane)

Продолжительное тестирование и разработка:

-Jenkins (на собственном железе)

-SemaphoreCI

-CircleCI

-Codeship

Vagrant. Стоит иметь ввиду. Но сейчас - Docker это вещь.

Вот краткий обзор технологий, которые должен знать веб-разработчик в 2016-2017 году.

Я лично не по всем пунктам согласен с автором. Но у меня нет настолько обширного и глубокого опыта, чтобы спорить о том насколько Docker крут или нет, или почему Flux отстой Redux рулит и т.п. А согласны ли вы с ним или есть возражения?

Делимся мнениями в комментариях.

Ссылочка на майндмапу, которую использует автор в видео: тык