Недавно наткнулся на одно видео, где была информация о том, что нужно знать 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 рулит и т.п. А согласны ли вы с ним или есть возражения?
Делимся мнениями в комментариях.
Ссылочка на майндмапу, которую использует автор в видео: тык
