[Must know] Что нужно знать web-разработчику в 2016?
Недавно наткнулся на одно видео, где была информация о том, что нужно знать 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 рулит и т.п. А согласны ли вы с ним или есть возражения?
Делимся мнениями в комментариях.
Ссылочка на майндмапу, которую использует автор в видео: тык
:D
Статью надо было назвать не "Что нужно знать web-разработчику в 2016 году", а "Человек-оркестр". В мире очень мало людей, которые знают это ВСЕ. Да и оно не нужно, по большому счету.
у автора (видимо, автора видео) не менее чем словесный понос.
мясорубка из слов. вместо пунктов 1\3\5\6 просто >> (tcp\udp):ip
так же гитхаб не особо упал, нужно знание самой технологии git.
да чего уж, давай vim.
Насчет брекетс еще можно еще подумать.
Но всредем лучше нормальной IDE ничего еще не придумали. Брекетс хорош если верстать много надо. А если фронтендер с уклоном на js то это webstorm\idea
лучше typescript сразу.
только если собираешься верстать за еду.
Gulp и только gulp. Работа в галпе основана на потоках что в ~20 раз быстрее гранта и его работой с файлами, а идеологически они похожи, по сему, зачем брать то что заведомо хуже.
Сравнение теплого с мягким. Browserify это сборщик модульный препроцессор аля commonjs\AMD. похож на nodejs`like стиль сборки зависимостей. А вебпак это уже конкурент gulp. Но тут уже кому что роднее.
пациент скорее мертв чем жив. Ни то ни другое не использовал почти никогда. Все есть в NPM
у первого и второго ангуляра похожее только название. второй ангуляр это скорее конкурент реакту.
если мало хлопот в жизни то да, пожалуй кложурскрипт вам подойдет.
нну да, laravel и особенно Lumen популярей yii2 , так что не будем говорить про yii2
ТОЛЬКО и ТОЛЬКО если вы понимаете что делаете, а если думаете только начинать то не стоит даже пытаться.
Этот список с названием "Высокопроизводительные" может составить только человек с биполярной шизофренией, но вощем не будем судить.
А по делу: языки со сборщиком мусора и без не должны сравниваться вообще. Это абсолютные разные классы языков. Это если бы вы смотрели на самосвал и суперкар с вопросом "А что же лучше?".
ну этот список еще покруче венегрет чем то что выше было
пачка презервативов имеется.
Открою секрет: sql(mysql\posgres), mongodb, || ram(redis,memcache) знание этого точно не даст вам помереть с голоду, а если хорошо знать то возможно и виллу на багамах.
настолько обширная тема что четырмя словами не обойтись.
а гугл то обидели. Да и некоторые пункты спорны.
Вощем, это прям почти монументальный бред в большей степени.
Не очень жалую JQuery, недавно макет натягивал и матерился, сайт очеееень долго грузится, вся красота была на JQuery, большую часть смог заменить на css, шевелится теперь в разы быстрее.
В целом по моим наблюдениям, использование JQuery в большинстве случаев неоправдано.