[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 рулит и т.п. А согласны ли вы с ним или есть возражения?

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


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

Web-технологии

457 постов5.8K подписчик

Добавить пост

Правила сообщества

1. Не оскорблять других пользователей

2. Не пытаться продвигать свои услуги под видом тематических постов

3. Не заниматься рекламой

4. Никакой табличной верстки

5. Тег сообщества(не обязателен) pikaweb

29
Автор поста оценил этот комментарий

:D

Иллюстрация к комментарию
14
Автор поста оценил этот комментарий

Статью надо было назвать не "Что нужно знать web-разработчику в 2016 году", а "Человек-оркестр". В мире очень мало людей, которые знают это ВСЕ. Да и оно не нужно, по большому счету.

раскрыть ветку
11
Автор поста оценил этот комментарий

у автора (видимо, автора видео) не менее чем словесный понос.


- FTP и работа с хостингом (залить, выгрузить, работа с cPanel и т.д.)
- Терминал (командная строка)
- SSH
- Основы GitHub
- Как происходить связь между клиентом(юзером) и сервером
- RESTful

мясорубка из слов. вместо пунктов 1\3\5\6 просто >> (tcp\udp):ip

так же гитхаб не особо упал, нужно знание самой технологии git.


- Текстовый редактор
Автор выделил 3: Atom, Sublime, Brackets.

да чего уж, давай vim.  

Насчет брекетс еще можно еще подумать.

Но всредем лучше нормальной IDE ничего еще не придумали. Брекетс хорош если верстать много надо. А если фронтендер с уклоном на js то это webstorm\idea


1)ES6/ES2015 (Babel)

лучше typescript сразу.


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

только если собираешься верстать за еду.


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

Gulp и только gulp. Работа в галпе основана на потоках что в ~20 раз быстрее гранта и его работой с файлами, а идеологически они похожи, по сему, зачем брать то что заведомо хуже.


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

Сравнение теплого с мягким. Browserify это сборщик модульный препроцессор аля commonjs\AMD. похож на nodejs`like стиль сборки зависимостей. А вебпак это уже конкурент gulp. Но тут уже кому что роднее.


-Bower, Yeoman

пациент скорее мертв чем жив. Ни то ни другое не использовал почти никогда. Все есть в NPM


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

у первого и второго ангуляра похожее только название. второй ангуляр это скорее конкурент реакту.


-Closurescript

если мало хлопот в жизни то да, пожалуй кложурскрипт вам подойдет.


-PHP (Laravel, Symphony2, Lumen^)

нну да, laravel и особенно Lumen популярей yii2 , так что не будем говорить про yii2


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

ТОЛЬКО и ТОЛЬКО если вы понимаете что делаете, а если думаете только начинать то не стоит даже пытаться.


Высокопроизводительные:
-Go
-Rust
-Java
-C#

Этот список с названием "Высокопроизводительные" может составить только человек с биполярной шизофренией, но вощем не будем судить.

А по делу: языки со сборщиком мусора и без не должны сравниваться вообще. Это абсолютные разные классы языков. Это если бы вы смотрели на самосвал и суперкар с вопросом "А что же лучше?".


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

ну этот список еще покруче венегрет чем то что выше было


-Защита

пачка презервативов имеется.


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

Открою секрет: sql(mysql\posgres), mongodb, || ram(redis,memcache) знание этого точно не даст вам помереть с голоду, а если хорошо знать то возможно и виллу на багамах.


Кеширование

настолько обширная тема что  четырмя словами не обойтись.



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

а гугл то обидели. Да и некоторые пункты спорны.



Вощем, это прям почти монументальный бред в большей степени.

раскрыть ветку
18
DELETED
Автор поста оценил этот комментарий
Комментарий удален. Причина: данный аккаунт был удалён
раскрыть ветку
4
Автор поста оценил этот комментарий

Не очень жалую JQuery, недавно макет натягивал и матерился, сайт очеееень долго грузится, вся красота была на JQuery, большую часть смог заменить на css, шевелится теперь в разы быстрее.

В целом по моим наблюдениям, использование JQuery в большинстве случаев неоправдано.

раскрыть ветку