×Закрыть

JavaScript глубина изучения

Здравствуйте.

Нацелился на стать Frontend (Angular 2), но необходимо предварительное знание javascript. Поиск информации обучающей обнаружил тенденцию обучающих материалов после объяснения простых вещей (циклы, массивы, ветвления...) переходить к примерам с jQuery.

Мне показалось что необходима картина крупными мазками от знающих людей до какой степени глубины учить javascript ... и как учить для достижения моей цели. Стратегия обучения нужна.

Если спросите про опыт: лет 10 назад по счастливой случайности простенький сайт динамический сделал с запросом к базе данных-тупо вывод данных в таблицу сотрудников организации (самый первый asp+ postgreSQL).... ни чего более.

Спасибо за ответы.

Лучшие комментарии пропустить

Неделя 0: Основы JavaScript
Неделя 1: React
ахаха

Я тоже думаю, что с реактом они как-то затянули, могли бы и пораньше начать

Это скорее обзор существующих на данный момент технологий, а не курс молодого бойца, ибо даже синьер может не знать половину технологий из списка и спокойно найтии работу

Зазвичай, шлях вигладає приблизно так:
HTML(5) + CSS(3) => JavaScript (jQuery) => Bootstrap, Less/Sass => JavaScript (React/Angular/ etc.)
Додатково: GIT, Babel, Webpack і тд. + трішки node.js за бажанням.
Ресурси:
Free code Capm
Codecademy org
YouTube — Sorax — JS
JavaScript
W3 school
Якщо узагальнити, то вам потрібно:
1) Навчитись верстати.
2) Освоїти базово JS, jQuery, написати декілька сайтиків з перделками/свистелками.
3) Bootstrap, препроцессори будуть плюсом.
4) Поглибитись у JavaScript, (es6), вивчити фреймворк, написати пару аплікух і розіслати резюмешки.
І не забуваємо про базу:
* DOM, BOM, Ajax, HTTP(s), протоколи, + принципи роботи браузера і тд.
* English — маст хев. Інтенсивно вивчайте англійську. Для розробників це стратегічно важливий скіл.

Синьером разработчика делает знание того, как сделать заказчика счастливым
А я то думал это тот, кто может делать работу и руководить двумя — тремя миддлами. Иначе получается, что девочки с окружной все поголовно синьоры.
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Немного оффтопа:
кто как думает, почему у Джава бэкендщиков зачастую требуют Джаваскрипт,
а у Андроидеров — нет -?
Кто не верит — может глянуть требования по андроид-вакансиям: jobs.dou.ua/...​cancies/?category=Android

Казалось-бы: Андроид ближе к фронтенду,
и обычно он с веб-клиентом стучится в REST-API, который пилит бэкендщик.

Моя версия: дело просто в названии.
(Джава и Джаваскрипт близки как свинка и морская свинка. Чего не скажешь про Андроид)

кто как думает, почему у Джава бэкендщиков зачастую требуют Джаваскрипт,

шоб экономить на «выделенных» фронтендщиках. по сути, получая за зп бекендщика фулстекера.

Казалось-бы: Андроид ближе к фронтенду,
и обычно он с веб-клиентом стучится в REST-API, который пилит бэкендщик.

через джаваскрипт стучится? или, может, стилизацию через CSS делает?

через джаваскрипт стучится? или, может, стилизацию через CSS делает?

это тебе лучше знать, как жаваскриптовая веб-морда об REST стучится))

и кстати, по поводу

шоб экономить на «выделенных» фронтендщиках. по сути, получая за зп бекендщика фулстекера.

вопрос: джава-бэкендщик в роли начинающего JS-фронтендщика — это зло или тренд?

джава-бэкендщик в роли начинающего JS-фронтендщика — это зло или тренд?

если на JS будет толстый клиент — то зло.
насчет тренда — тут вернее будет вакансии смотреть, насколько это распространено.
в моём личном окружении ни один джавист при собеседовании не получал вопросов по фронту сложнее «а как описать форму в HTML?»
надеюсь, что не тренд.

это тебе лучше знать, как жаваскриптовая веб-морда об REST стучится))

ну, ладно-ладно, зря язвил, был не прав.

если на JS будет толстый клиент — то зло.

вот и мне так видится.
как представлю Джава-бэкендщика, который своими
заскорузлыми рукожопыми клешнями полез UI колдыбачить,
так мороз по коже.

Хороший, годный UI способны создавать только спецы, имхо,
другого я не видел, не встречал в своей практике.
Не понимаю, на что рассчитывают наниматели «жнецов-швецов».

А юзер -то бэкенд не видит,
поэтому судит по фронтенду — насколько тот юзабелен, отзывчив, и пр.
И если клиент увидел галимое поделие, то поди потом ему докажи,
что на бэкенде всё супер-пупер. Не поверят.
Из этого user experiens-a складывается отношение к продукту,
и на основании experiens-a товарищ сапиенс делает или не делает свой выбор.

Думаете глюки авторизации, проблема с данными, или зависающий сайт, то есть проблемы на стороне бэкенда- не отпугнут пользователя?

Может потому что API к знанию джаваскрипта тут не причем?

до какой степени глубины учить javascript
До глубокой
переходить к примерам с jQuery.

Учи ванильный js
как учить для достижения моей цели.
У всех есть цель, жаль не все достигают
Стратегия обучения нужна.

На ютубе забанили? напиши практика js и пиши код
Здравствуйте.
Добрый день!

По моему я четко дал то что нужно топикстартеру, зачем ваш безсмысленный комментарий — непонятно!

Потому что сайт этот легко гуглиться, даже если просто ввести «javascript» .
wickedblog.ru/…​eloquentjavascript_ru.pdf
А вот это, полезная штука и гуглится не так легко. :)

Книга по программированию на русском? Это же моветон!

Так то лучше!

Спасибо большое. Я уже штудирую ее, но спасибо.

а как глубоко надо знать Javascript если идти на Asp.net MVC вакансию, например

Как повезет с вакансией. В целом практически все бэкенд-девелоперы в какой-то мере ориентируются в JS.

а верстку на каком уровне нужно знать для бэкенд?

Ну, если брать мир ООП, то считается, что каждый уважающий себя бекенд разработчик должен знать как наверстать MVC и синглтон.

Приветствую. Сочинял я недавно „курс молодого бойца” одному местному падавану. Может, Вам пригодится.

1. Official sources.

— JavaScript
www.w3schools.com/js/default.asp
docs.microsoft.com/…​script-language-reference
developer.mozilla.org/…​/Web/JavaScript/Reference

The first source will be your ‘bible’ for a long time. Every time you need to refresh your memory, I think, you’ll find the answer there more quickly.

— TypeScript
www.typescriptlang.org/docs/tutorial.html

— Flow
flowtype.org/…​cs/getting-started.html#

TypeScript and Flow add a type checking for JavaScript. If you know something about OOP, this will give you an idea what they are about.

But! Types are checked by a signature now. Thus, in most cases, when two types have the same properties|methods they are considered identical. Pay your attention on this, and do not expect a ‘real OOP’ here

— CoffeScript
coffeescript.org

It is considered as outdated, and there are so few followers.

Elm
elm-lang.org

It is gaining points now, and seems to be a good functional programming language, but OOP and functional programming are on a different sides.
It’s good to use something from OOP, something from FP, but (and this is expected) it’s more difficult to use pure OOP or pure FP in a real world.

If you need some idea about which concepts FP plays with, just read a documentation for Ramda ramdajs.com/docs )))

To be able to run modern JavaScript code in ALL browsers you need a transpiler, which will convert modern code to old standards.
You can even select IE8 as a target!

There are two ways: to use compiler with ’target’ option, or to use real time transpilation. Modern hardware allows code to be transpiled really fast.

— Babel
babeljs.io

Supports both offline and real-time modes.
You don’t need it when you use TypeScript compiler and target=es5 (or even =es3) except you chose target=es6 for a compilation to get the fastest code, and babel -> browser solution for visitors with old browsers.

— LESS/SASS/SCSS
lesscss.org
sass-lang.com

Only few people now write in pure CSS. Everyone prefers to use some preprocessors. It’s much more easy to take some css framework and replace few variables in a special variables.less/variables.scss template, than to replace a special values in all css, in order to adjust the framework for your needs.

There is not too much difference between less and sass, these are different implementation of the same idea
www.thebalance.com/sass-vs-less-2071912

If you saw, that sass is Ruby based one, there is a C implementation for NodeJS, and in most cases when you will need to have scss in your project, you will work with npm module rather than with ruby gem.

From my experience, less is more popular, and almost every css framework provides a less version.

2. Tools

— Node.js
nodejs.org/en/about

Nowadays nodejs is an industrial standard for a JavaScript run-time. This means that you can write your code in JavaScript and with bunch of modules run it on a desktop OUT of a browser sandbox. You can create web servers, connect to a DB, manage files, etc...

NodeJS comes alongside with a package manager
— NPM
www.npmjs.com

which now is addicted with
— Yarn
yarnpkg.com/en

and Node version manager
— NVM
github.com/creationix/nvm
(as you can see, it requires certain experience to install nvm, and in most cases it’s not needed for a pet project development. Just FYI that commercial development uses nvm to freeze a working environment and switch between different ones quickly)

— Git
en.wikipedia.org/wiki/Git

This is the most popular (now) and most powerful version control system. It’s so complex, that many developers, and me also, continue to learn it during few years. I’m not sure, I could manage some difficult cases, when branches, submits, local and remote repositories are messed up up on result of some wrong git command. Sometimes, only a hard reset is only an option for a beginner )

— Github
github.com

A public service for remote git repositories. All (99.99%) node modules are there to give you an access to their source codes and history of changes.
It is very good habit to take some package you like, and take a look inside it learning how to write good code. Most of the time ) Because some modules are not ideal. Especially, when there are only few contributors.

— Bower
bower.io
Bower was a standard _client_ side package manager. So, you used npm modules to build you project, and bower packages to use them in a browser.
Despite bower is now actively replaced with node implementation of packages on npm, you’ll still find some project sources that are based on bower.

Generally, to answer why bower is outdated, we have to get back to ES6/TypeScript/Flow.
In past days, when you needed to support modules on a client, isolated pieces of code, you needed additional libraries like commonjs with require() method, or requirejs, amd
with define() one.
Modern JavScript dialects introduces import directive, which is semantically close to require(), thus commonjs is in a favour, and as long as nodejs modules were based on commonjs, npm has replaced bower. This is a background. The reason is that there is no sense to support two different package managers, when it can be only one.
For example, such libraries like momentjs or lodash/underscore are widely used by node modules, bower packages, and directly in a code. Thus, it was a matter of time for only one package manager.
Besides, node package.json description file gives much more benefits than bower.json.

— Yeoman generators
yeoman.io/generators

I would recommend you to start from yeoman. It gives you a chance to create a project template with one console command. There you can find so many popular templates like ‘gulp-angular’ or ‘react-webpack’ (see the Build tools and Frameworks sections below).

3. Build tools

Those times, when you needed only www folder, and everything was static, were over a long time ago. Now you need to build a web project.
You need to compile css, to prepare configuration files, to check your javascript code for errors and anti patterns, to compile typescript/flow/elm, to find and plug in modules, to merge separate files into one big bundle (this reduces number of requests to server), to minify it, to uglyfy it, to run unit tests, to start a development web server, to embed a live reload support, and some other things like to update package.json version, rebuild on changes, deploy a result, etc..

These are task runners and libraries which are used for build project purposes.

— Grunt
gruntjs.com

An outdated task runner, but you might will work with some projects driven by grunt. There is a giant config object inside and tasks with complicated synchronisation. Was a needed evil )

— Gulp
gulpjs.com

Nice, fast task runner. Is build with a concept of a task pipeline under a hood. Pure code, no monstrous config. But ES6/TypesScript/Flow requires a bit more, which is not easy to implement only staying with gulp. But still I would say 80% of projects which, are not under grunt, use gulp.

— Webpack
webpack.github.io
„A module bundler” says everything. The most actual task runner.

But on our current project we mix gulp with webpack. Now we are on a phase to migrate our project from pure JavaScript to TypesScript, so our source mixes two dialects, and the project is built with grunt which calls webpack to bundle TypeScript part, and uses a result then.
Everything is methods! So, we can couple everything together. It’s a matter of a sick fantasy ))

— Karma
karma-runner.github.io/1.0/index.html

An industrial standard test runner, which supports testing in a browser, or unit testing.

— Jasmine
jasmine.github.io

„Behaviour driven” I would say it’s too loud statement )) Just some pattern should/it/expect.
More real BDD implementation is cucumber/gherkin github.com/cucumber/cucumber-js cucumber.io/docs/reference but it’s not really popular.

It’s easy to write unit tests with jasmine. A nature of JavaScript allows to create mock object as ‘abc’

I would recommend you to try to create jasmine tests immediately after you create some ‘hello world’. You’ll gain necessary experience.
In a real world time needed to implement some feature and to cover it with tests is like 1 to 2. Thus, the more tests you write, the less time you’ll spend in a future.

— PhantomJS
phantomjs.org

A browser simulated environment for testing. Widely used on build servers because of no-GUI sessions.

— Jenkins
jenkins.io

A popular build server, but I think this is overhead for you now )

4. IDEs and editors

This question is either to much individual, or otherwise is limited with some project corporate standards.
Of course, it is also platform specific.
But there are few solutions, which are popular enough to have a chance to face them in a real life.

— WebStorm
www.jetbrains.com/webstorm

A really good IDE, but with only one con: it is written in Java and eats insane 800MB-1GB of your RAM. You have to have a good PC/notebook to work in WebStorm. But total integration with everything and number of abilities to refactor your project makes it a good choice

— SublimeText
www.sublimetext.com

A really fast editor, which can be extended with number of plugins, so can be a replacement of an IDE. Needs some JavaScript experience, because it is not an IDE, so you’ll find your errors later than with WebStorm. But, when you work like a cannon, its fastness adore you.

— Atom
atom.io

Yet more editor of SublimeText family. The same ideology, even more user friendly in configuring it, but Sublime is a compiled to a platform native code, and is much more faster. Besides, Atom works not good with really big javascript files like a final project bundle. Saying honestly, source files MUST be small, and you will not experience any troubles with Atom then, but in our case, we need to check out the result bundle form time to time, and Atom sucks then.

— Code
code.visualstudio.com

A TypeScript oriented editor. It’s nice, I could say it is also from the Sublime family, but for some reasons I don’t use it. Try it by your self ) May be I’ll switch to it as we finish migration to TS...

4.1 Online editors

From time to time you will need to prototype something quickly. In this case you can use online editors/translators

— Codepen
codepen.io

— TS Playground
www.typescriptlang.org/play

— Less Playground
less2css.org

— Sass Playground
www.sassmeister.com

5. Learning resources

The most difficult part for me, because it was alway like ‘just google it, take it, and learn’.
I could suggest the most popular solutions, you have to try them. If you face to some difficulties with something specific, then I’ll take a look precisely.
Because otherwise I have to pass all these courses, that will require too much time.

— Coursera
www.coursera.org/…​uages=en&query=javascript

High school and conference -like videos.

— Khanacademy
www.khanacademy.org/…​e_search_query=javascript

Similar to Coursera

— Udacity
www.udacity.com/…​e/javascript-basics—ud804 — for example

The same as above

— Udemy
www.udemy.com/…​ip&sort=price-low-to-high

And this particular one, which was recommended
www.udemy.com/javascript-essentials

— Codeacademy
www.codecademy.com/learn/learn-javascript

Step by step write code learning technique.

— Codecamp
www.freecodecamp.com

The similar idea

Try to find something here learntocodewith.me/posts/code-for-free

I would say, that ALL courses will tech you the same.
Everything else depends on how many hours you will spend on the Internet, learning examples, asking questions, mentioning problems and solutions...

DO NOT repeat my experience when I stay three days in an office when I was young!!! )) This damages your health. Try to find a good balance, and extend the limits when you are ready.

5.1 Interview questions

It is supposed to be a good source of information.
Check them out to define a scope of learning. When you will be able to answer these interview questions, you are ready ))
www.toptal.com/…​cript/interview-questions
medium.com/…​w-6fa6bdf5ad95#.h4u2k34lm
career.guru99.com/…​ript-interview-questions

6. Frameworks

The last but not least section is about JavaScript frameworks. Nobody now writes pure JavaScript code. Almost. 95% of money. Except whose who writes a simple visitor-card web sites.
Everyone else uses one or even few frameworks.

Before ReactJS, everything was about different implementations of MVC pattern. With more or less model/controller coupling with view.
After that developers realised that there is a different approach.

I would recommend you to learn ReactJS as your first framework.
Frankly speaking this is NOT a framework. This is a UI library, which defines certain data/instructions flow principles, and other libraries follow them, and extend react to a real framework.

— ReactJS
facebook.github.io/react

Defines strict directions for data flow as from top to bottom, and for instructions as from bottom to top.
Uses a virtual DOM to find changes, and updates only needed parts of a real DOM.
Can use any javascript dialect like ES6/Flow/TypeScript

Can be used separately to render complex modules inside other frameworks like Angular.

Must be extended with a business logic, which can be implemented either in flux or redux libraries.

— Redux
redux.js.org/…​roduction/Motivation.html

— styled-components
github.com/…​ponents/styled-components

— ... and dozens of others.
This is a major difference of react world, that you can replace one piece with another without a need to migrate to entire new framework. These are hundred of thousands of Euros for a customer!

— AngularJS
angularjs.org

A complete framework. Requires much more time to learn, but allows to write web sites (buggy of course) quickly in a future. It is good for a freelancer who needs to grow his portfolio fast.
It is based on TypeScript.

— Vue.js
vuejs.org

— Ext.js
www.sencha.com/products/extjs/#overview

— EmberJS
emberjs.com

— MeteorJS
www.meteor.com

I have not worked with the last 4 frameworks. Nothing can say about. Only heard enough to understand that people use them.

Это скорее обзор существующих на данный момент технологий, а не курс молодого бойца, ибо даже синьер может не знать половину технологий из списка и спокойно найтии работу

Обратное утверждение тоже верно: если знать половину из списка, можно найти работу.
Смысл в том, чтобы не сидеть «словаком»: учите меня, я вам работать буду, а взять в руки ноутбук и изучать.
И еще, чтобы не подумали, что от джабаскриптера требуется только знание == vs ===

Зачем?
Например, для Руби.
Например, для Руби.
Фу, от кофискрипта даже рубисты плюются)

Я к тому, что кофискрипт уже идет в комплекте с руби он рейлз. А использовать или нет- личное дело)
Пока не было ES2015 — думаю ,кофе всех устраивало, так как проще.

Джунов часто ставят на саппорт старых проектов. Вот, например, сейчас синьера на первый ангулар не заманишь. Да и на четвертый — не особо. Все хотят в реакт. Я же дал уточнение в таком же духе касательно bowerа

ох, бедные джуны, мало того что саппорт, так еще и на умершем диалекте.

Джуну больше интересно с чего начинать и в какой последовательности учить основы. Ваш перечень всего, о чем вы слышали в этом плане мало полезен.

У нас разное представление о том, с чем джуну прийдется сталкиваться каждый день.
Это я Вам ответственно говорю как человек, помогающий решать джунам их проблемы.
Список составлен не «из всего», а из того минимума, который необходим.
Не хочет? Пусть не учит. Его дело, и его карьера.

Это не минимум, это почти максимум , который даже не всем синьорам нужен.
Зачем вы привели в пример 4 текстовых редактора? 1-2 х достаточно для начала.
Зачем знать джуну столько фреймворков? Люди, зная в совершенстве 1-2 фреймворка в долину релоцируются.
Обзорно да, можно все пробежать. Но вы же не указали глубину- насколько учить?)
А в этом и состоял вопрос -насколько глубоко учить!? А вы просто накидали ссылок на баззворды.)

Если это минимум для джуна, то могли бы вы дать список того, уверенное знание чего делает человека синиором?

Для обеспокоеных. Это список того, что джун может начать учить. Синьером разработчика делает знание того, как сделать заказчика счастливым

Синьером разработчика делает знание того, как сделать заказчика счастливым
А я то думал это тот, кто может делать работу и руководить двумя — тремя миддлами. Иначе получается, что девочки с окружной все поголовно синьоры.

Синиором человека делают не знания, а размер оплаты.

Вы

как человек, помогающий решать джунам их проблемы.
хоть половину этого списка знаете на уровне действительно JavaScript Developer/Architect ? ...

Это джуну нафиг не впало, плюс ваше реплика по поводу ооп и статической типизации неправомерна, ибо две несвязанные вещи. Далее bower, yeoman, grunt немного устарели и их учить не стоит джуну, зря время потратит, хотя там и учить особо нечего.

Вообще выглядит как список трендов, и некоторые непопулярные

yeoman
А с этим что не так? Как в мире фронта теперь скафолдят проекты по шаред темплиту?

У Angular і React — CLI. У інших — хз...

Так там же нет всяких прикольных штук в дефолтных проектах, типа авторского набора плагинов для вебпака и «правильной» структуры проекта с набором команд.

типа авторского набора плагинов
это то почему еоман мне не нравился, там была куча лишнего дерьма в сборках, и не было того что мне надо, в итоге быстрее ручками собрать

у ембера вроде то же, у того же ext js тоже самое, а остается только вью — но он не очень трендовый

Неделя 0: Основы JavaScript
Неделя 1: React
ахаха

Неделя 0: Основы JavaScript
Неделя 1: React
Неделя 2: Angular

Стань Front-end разработчиком за 21 день, и зарабатывай тысячи долларов в месяц!!

Я тоже думаю, что с реактом они как-то затянули, могли бы и пораньше начать

неделя 0: реакт
неделя 1: javascript

А ангуляр пусть выучат до курсов

На "основы"(image.prntscr.com/…​14b09ba4668597e9d43ff.png) JS и так достаточно дня 3 если это 2-й язык.
На счет реакта не в курсе, но если брать первый ангуляр, то когда мне прислали тестовое задание с ангуляром(который я на тот момент не знал), то ушел 1 день чтобы написать фронтенд для первого простенького SPA с парой темплейтов и 2 контроллерами. Так что не понимаю чего смешного вы нашли. Ах да, под 1 днем я подразумеваю часов 10±, хз какие там мерки.

Да на любой язык-фреймворк легко пересесть если уже есть опыт другого языка — 1 день чтобы начать писать, 2 недели чтобы вникнуть полностью в концепт, а дальше только подводные камни

А задача у вас какая ? Выучить весь JavaScript, весь стек веб технологий или все же максимально быстро найти работу ?

Работу. А там дальше на месте углубляться знаниями в глубь и вширь...

Изучать javascript нужно до максимальной глубины как только можно. А вот про фреймворк/библиотеку можно будет думать потом. Потому что в мире фронтенда все меняется очень быстро. Сегодня популярен реакт, завтра будет vue. Вот вы хотите ангуляр 2 а уже вышла четвёртая версия :)

И при этом всем есть куча вакансий и на Ангулар 1, и даже на Ембер и Бекбон. В мире фронтенда все конечно меняется, но 95% этих изменений можно пропустить и ничего не потеряешь, ибо через полгода хайп уляжется и никто даже не вспомнит. Ну а если какая-то технология все же прижевется и станет мейнстримом, то с нормальными знаниями джаваскрипта изучить ее не займет дольше месяца-двух.

Соглашусь с вами, вакансии есть. Но лично я бы не начал учить ангуляр 1 сейчас, ведь это не даст ощутимых преимуществ при переходе на новую версию, а возможно даже помешает, учитывая что они сделали практически другой фреймворк (one way bind, rxjs, typescript, etc) под тем же названием.

Да ладно бекбона почти нет

Угу Ext.js и Knokout.js уже почти и не вспоминают, а сколько шума было.

Изучать javascript нужно до максимальной глубины как только можно.
у одного меня проскочила мысль, что это звучит как-то по гейски?)

только у вас. по гейски это когда «предоставлять» максимальной шлубины..... а «прозондироваать» как в данном случае.... наоборот....

товарищ намекает, что тот, кто дает — гей, а кто берет — наоборот (антигей лол)

ок. И как же его выучить до максимальной глубины? Искать материалы с примерами реализации сайтов с серверного кодом на Node.js ?

Так необходимую глубину ЖС и не обрисовали :(

jscategory.wordpress.com так будет досточно глубоко для любого формошлепа

Ну теория категорий для джс имеет 0 популярности. В джс реально только подобие монад прижилось в виде промисов.

jQuery жеж можна розглядати як монаду Maybe

о, ну так теперь хоть что то прояснилось ) Мне просто оно пока представляется ящиком с инструментами, где я не знаю что и для чего использовать.

если нацелился на ангуляр, то в придачу надо знать TypeScript

Зазвичай, шлях вигладає приблизно так:
HTML(5) + CSS(3) => JavaScript (jQuery) => Bootstrap, Less/Sass => JavaScript (React/Angular/ etc.)
Додатково: GIT, Babel, Webpack і тд. + трішки node.js за бажанням.
Ресурси:
Free code Capm
Codecademy org
YouTube — Sorax — JS
JavaScript
W3 school
Якщо узагальнити, то вам потрібно:
1) Навчитись верстати.
2) Освоїти базово JS, jQuery, написати декілька сайтиків з перделками/свистелками.
3) Bootstrap, препроцессори будуть плюсом.
4) Поглибитись у JavaScript, (es6), вивчити фреймворк, написати пару аплікух і розіслати резюмешки.
І не забуваємо про базу:
* DOM, BOM, Ajax, HTTP(s), протоколи, + принципи роботи браузера і тд.
* English — маст хев. Інтенсивно вивчайте англійську. Для розробників це стратегічно важливий скіл.

Все так, кроме того, что jQuery не нужен от слова совсем, если нацелился на Ангулар, бутстрап тоже не нужен, less/sass — при желании или для общего развития, маст хев технологиями препроцессоры для фронтендщика не являются. Так что скорее обучение будет выглядеть так:
HTML(5) + CSS(3) => JavaScript => React/Angular/ etc.

jQuery не нужен от слова совсем
Это просто хохма. В 80 % случаях заявления типа «джейквери не нужен!!!1111 Сейчас 2017!!!!1111» заканчиваются тем что на проекте одновременно и ангулар и джейквери и джейквери юай + куча джейквери плагинов и дай бог чтобы был только 1 фреймворк типа ангуляра, так там еще может и бэкбон оказаться.

На проекте реакт без всяких джейквери, ангуларов и бекбонов. ЧЯДНТ?

не мешай, пусть живут в своем болоте)

Это у вас проект молодой просто

Проекту уже лет 8. Пару лет назад начали переписывать на реакте вычищая весь старый хлам. Но таки я и имел ввиду новые проекты. Если человек сейчас не имеет вообще никакого представления о фронтенде, то вкатится он дай бог через год-два. К тому времени будет куча вакансий на саппорт реактовых/ангуларовых проектов без джейквери. Поэтому тратить сейчас время на эту древнюю чушь нужно только если собираешься работать в маленькой веб-студии и клепать интернет-магазины и визитки на вордпрессе, бутстрапе и джейквери.

тратить сейчас время на эту древнюю чушь
Мені здається, щоб розібратись з jQuery потрібно всього лиш декілька годин.

Звичайно що ж у 2017 він не такий популярний, але це уже як традиція його «проходити» для початківців. Тим більше, людина навчиться працювати з DOM, наприклад. Напише туду-шку лапшекодом на jQuery, і через декілька місяців уже грамотно React-ом Переходити із примітивного html + css відразу у серйозний фреймворк — не найкраща ідея. Зустрічав спеців, які пишуть на 1-му енгулярі, а базового js не знають. Відповідно — перейти на щось інше для них буде великою проблемою.

Тим більше, людина навчиться працювати з DOM, наприклад. Напише туду-шку лапшекодом на jQuery, і через декілька місяців уже грамотно React-ом Переходити із примітивного html + css відразу у серйозний фреймворк — не найкраща ідея.
Чтобы работать с ДОМ джейквери не нужен. Встроенного ДОМ АПИ вполне достаточно для абсолютно любых потребностей.
Джейквери вообще никак не поможет перейти на реакт или ангулар, ибо используется совсем для других целей нежели эти фреймворки. А вот знать тонкости нейтив джаваскрипта будет очень полезно.

год-два... ты меня убил на подлете.... мне говорили месяца три займет чтобы въехать и на работу устроится. Жесть кому верить.

Зависит от твоих знаний и умений. Если на данный момент ты вообще ничего не знаешь, то HTML5 + CSS3 займет недели две, даже поверхностное изучение джаваскрипта с нуля по learn.javascript.ru еще пару месяцев, при условии что ты каждый день будешь по несколько часов усердно заниматься. А дальше есть 2 пути: либо разбираешься с jQuery, бутстрапом, каким-нибудь вордпрессом и идешь в мелкую веб-студию натягивать шаблоны за 200 баксов без каких-либо перспектив карьерного роста, либо пытаешься попасть на внутренние курсы от «лидеров рынка» вроде епама, софтсерва, люксофта и т.п. Но чтобы попасть на курсы знания HTML + CSS + JavaScript уже недостаточно. Поэтому придется потратить еще пару месяцев на изучение основ Ангулара/Реакта, всяких вебпаков, галпов, нпмов и прочей инфраструктуры, немного разобраться с юниттестами, иметь хотя бы общее представление о node.js и какой-нибудь бд вроде MySQL или mongo.db. Ну и конечно уровень разговорного английского достаточный чтобы убедить препода на собеседовании в том, что ты английский знаешь.
Потом еще около 4 месяцев собственно курсов, после которых если тебе повезет, то возьмут в интернатуру еще месяца на 4 с зп 300 баксов. А вот потом если тебе опять-таки повезет, то уже попадешь на какой-нибудь проект и перед тобой откроются нормальный перспективы роста зп с перескакиванием между галерами каждый год.
Но может и не повезти. У нас на проекте стажировался один парень, и в джаваскрипте хорошо шарит, и Реакт/Редакс с сопутствующей инфраструктурой пилит и сам по себе довольно приятный в общении, а проекта все нет и нет.

3 месяца? Это шутка? Год минимум если уделять по 8 часов в день. Люди с уже схорошим багажом знаний по три месяца резюме рассылают, чтоб просто попасть на собеседование. Реально с нуля это полтора года, если есть способности.

У меня лично, с момента как я начал учить и до первого трудоустройства прошло почти 2 года. С другой стороны знаю человека, который прошел этот путь за 5 месяцев. Тут уже многое зависит от персональных факторов.

2 года...Как именно вы занимались у вас было каждый день вечерком по нескольку часов после работы ? Пытаюсь оценить в человеко-часах хотя бы приблизительно... Возможно тот который всего за 5 месяцев возможно более организованно подошел к вопросу самообучения.

По-разному. Было что по 12+ часов не вылазил из-за компа. А было и что и 1-2 недели ни строчки кода вообще. Но, большую часть времени, да 4-5 часов после работы. Только ночью, а не вечерком. :)

У меня ушло 8 месяцев (8-10 часов в день почти без выходных) практически с нуля до js developer. Но понятие о программировании, ооп и т.д. имелось.

Видимо подразумеваете уровень BackEnd или вообще FullStack. Меня интересует затраты времени на FrontEnd. Там наверное попроще будет.
Кто нибудь знаком с приблизительным временем на освоение сугубо FrontEnd ?

node.js знал немного (пригодилось в дальнейшем), а устраивался именно на фронтэнд, как js developer, попал на проект на angular 1. Через 3-4 месяца попал на новый проект на angular 2.
Где-то за 5 месяцев обучения, мог претендовать на работу в небольшой компании, но меня это не привлекало.

Там наверное попроще будет.
Нет, не будет. Трудозатраты на освоение фронт-энда будут сопоставимы с трудозатратами на освоение бек-энда.

Да, но такая странная тенденция сложилась на рынке,что от бэкендщика требуют знание фронтенда еще. А от фронтендщика далеко не всеггда тебуют знание бэкенда.

От бекендщика требуют такого же уровня знания фронтенда, как от фронтедщика — знания бекенда. Другое дело что есть ряд ушлых работодателей, которые хотят платить как за фронтенд или бекенд, а вот требовать как от фулстак дева.

Это не ушлые ,это тупые работодатели, поэтому бедные -поэтому жадные.
Самое главное ,чтобы не вешали на фронтендщиков роль дизайнеров. Потому что качественный UI/UX — это нужно долго и нудно учиться этому направлению. А это часто вешают на фронтендщиков и потом глаза кровоточат от такого UI и руки болят от такого UX. Хуже этого только — когда хотят «фулстэк», чтобы был дизайнер и фронтенд и бэкенд и SEO в одном флаконе.

Самое главное ,чтобы не вешали на фронтендщиков роль дизайнеров.
Жиза жизненная.

Последний раз видел jQuery, когда выпиливал его из ангуляр проекта в 2014 году, индус какойто наворотил каши.

вначале года еще вел один проект где был джквери, но там конечно реакт имел бы куда больше смысла, однако переписывать еще меньше желания было

У вас там своя атмосфера?

Серьезно?! Да любой, начиная с angular.io. И любой, над которым я работал, единственный jquery — это jquery.lite встроенный в angular1. Ни капли jquery, ни капли jquery-плагинов.

Серьезно?! Да любой, начиная с angular.io.
Лол. А что там делает джейквери?

Набери в консоли
$stjq("div").html("aaaa").append("ddd1″)

$stjq.ajax("angular.io").done(function (q){alert(q)})

Може у вас аддон якийсь стоїть ? Owl, скажімо.

Ага, нашел, вот эта хрень в себе тянет jq 1.четотам — swiftype.com

емм... в мене ця хрень (s.swiftypecdn.com) взагалі в кастом блок-списку AdBlock (чого я її туди додав ?)

Ну на этой страничке точно вроде нет. Ну а на хомяке angularjs.org что-то все равно пошло не так

Там Angular1 — сам бог велів :)
На 2-му переважно виходить так, що прикручують bootstrap, а за ним вже і jquery

На 2-му переважно виходить так, що прикручують bootstrap, а за ним вже і jquery
Так это же не тру. Как вы вообще по ночам спите после такого? Тянуть ненужный бутстрап а еще и ненужное джейквери. У вас же есть там фетч, полифилл и все такое.

Ладно, хер с ними. Я просто большой противник всяких jquery. bootstrap, angular-material и подобного, но не потому, что это «не тру», а потому что не вижу в этом необходимости и вижу проблемы.
Точнее, бутстрапы можно юзать в виде MVP или «додизайновой» версии продукта, чтобы по-бустренькому что-то склепать. jquery — ну вот серьезно не знаю, зачем его использовать, если без него обойтись можно без каких-либо проблем.

он просто бывает транзитивной зависимостью у библиотек\фреймворков которые существуют достаточное время ... потихоньку конечно выпиливается с развитием браузеров, но еще есть в достаточном количестве ... а так напрямую использовать конечно смысла не много ...

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

Хорошо. Но все-таки должен же быть хоть один более-менее известный сайт с нормальной посещаемостью без jquery? Я что-то найти не могу. Смотрю вот линкедин на жеквери и эмбере, стэковерфлоу — тут все понятно — он на жеквери в лучших традициях с серверным рендерингом.

З.Ы. А в код твитера кто-то заглядывал? Его переписывали уже сотню раз. Кто-нибудь знает почему там все до сих пор не на ангуларе и реакте, а вместо этого «лапшекод» на жеквери?

до сих пор не на ангуларе и реакте
Для мобильного твиттера это не правда (в части реакта)
medium.com/…​pps-at-scale-d28a00e780a3

Я не большой поклонник твитера, но разве мобильная версия кому то нужна, когда есть приложение как бы?

Хз насчёт твиттера, а вот фейсбуком я пользуюсь именно как веб-приложением. Нативное жрёт сильно много ресурсов.

Jquery живе і житиме довгі роки після хайпу а-ля реактики і ангулярчики. Не всі розробники практикують hype-driven development, і для рендеру таблиці реакти і ангуляри не катять.

Подписаться на комментарии