NW.js или Electron? / Habr
Если вы хотите создать собственное десктопное приложение на основе веб-технологий, то мир опенсорса предлагает два основных варианта: NW.js (ранее известный как node-webkit) и Electron (atom-shell). Выбор между ними не так очевиден, поэтому я решил создать сравнительную таблицу и остановиться на самых важных отличиях.
И NW.js и Electron предоставляют платформу для разработки десктопных приложений с HTML в качестве представления и NodeJS для доступа к системному API (для работы с жестким диском, железом и т.д.). Но существуют принципиальные различия между двумя проектами.
Парадигма
В NW.js точкой входа в приложение является веб-страница. Вы указываете URL основной страницы в package.json и она открывается как главное окно приложения. В Electron точка входа — это программа на NodeJS. Вместо указания URL-адреса напрямую вы «вручную» создаете окно и загружаете в него HTML-файл с помощью API.
Это чрезмерное упрощение, но можно сказать, что парадигма NW.js более браузера-ориентированная. NW.js загружает указанную HTML-страницу и эта страница получает доступ к контексту Node.js. Если открыто больше одного окна, то все они получают доступ к этому общему Node.js контексту. Это означает, что вы можете получить прозрачный доступ к DOM всех открытых окон.
Electron, с другой стороны, имеет более NodeJS-ориентированный подход. Он запускает среду выполнения Node.js, которая получает возможность открывать окна, в которые вы можете затем загружать веб-страницы. Это означает, что связать несколько окон с основным процессом намного сложнее.
Победитель
Защита исходного кода
В Electron нет какого-либо механизма для защиты вашего исходного кода. Asar трудно назвать приемлемой защитой, учитывая что это простой tar-архив и фактически любой пользователь может «распаковать» вашу программу как обычный архив и получить доступ ко всем ресурсам и исходному коду.
NW.js позволяет собрать исполняемый файл с защитой через V8 Snapshot. Данное решение конечно не компилирует JavaScript в машинный код (как утверждает документация) и не обеспечивает полную безопасность исходного кода. По сути это просто очень хорошо обфусцированный код. Но если единственная альтернатива — оставить исходный код совершенно открытым, то многие разработчики предпочтут V8 Snapshot, даже учитывая потерю примерно 30% производительности.
Победитель: NW.js
Время запуска
Я не пытался специально замерять время запуска приложения, но по личным ощущениям приложение на Electron запускается заметно быстрее как на Windows, так и на OSX. Даже если отключить V8 Snapshot, NW.js-приложение загружается гораздо медленнее.
Победитель: Electron
Open Source
В свое время Electron сделал смелый шаг, поддержав IO.js в момент застоя разработки Node.js. Это означает, что Electron в большой степени стремится поддерживать передовые возможности JavaScript, в то время как NW.js больше ориентируется на поддержку обратной совместимости (по крайней мере в теории).
Также нельзя не заметить высокую скорость разработки Electron. Больше сотни коммитов в неделю, по десять релизов в месяц. Команда разработчиков активно отвечает на вопросы на github. С другой стороны, NW.js все еще находится в версии 0.15, а github-документация кажется довольно устаревшей. Например, регулярно можно увидеть упоминания названия «node-webkit», хотя проект был переименован несколько лет назад.
Победитель: Electron
Послужной список
Несмотря на то, что NW.js существует дольше Electron’а, насколько я могу судить, на Electron разработано гораздо больше популярных приложений. Из данного списка NW.js, кроме Popcorn Time и Koala, трудно выделить что-либо значительное. С другой стороны список Electron смотрится гораздо солиднее:
— Slack
— Visual Studio Code
— Cocos Creator
— Pixate Pixate
Победитель: Electron
Вывод
По большему счету, единственное существенное различие между двумя проектами сводится к одному признаку — способности (или отсутствию таковой) «обезопасить» ваш исходный код. На мой взгляд, это единственная причина, почему разработчик может выбрать NW.js. Хотя данный вывод, вероятно, страдает от моей собственной предвзятости, т.к. я использовал Electron гораздо активнее, чем NW.js. Поэтому в комментариях просьба рассказать про ваш опыт работы с этими двумя библиотеками.
См. также
NW.js & Electron Compared
Technical Differences Between Electron and NW.js
Node JS — уроки для начинающих, курсы Express JS
Приветствуем в новом видео курсе по изучению платформы Node JS, а также фреймворка Express. В ходе курса мы научимся создавать простейшие сайты на Node, а также изучим библиотеку Express для быстрого отслеживания URL адресов.
Полезные ссылки:
Информация про Node JS
За несколько последних лет Node JS стал невероятно популярной платформой для разработки различных веб сайтов. На сегодняшний день Node может похвастаться большим списком веб сайтов, что разработаны с использованием данной технологии.
Список нескольких веб-сайтов на Node JS:
- Всемирная платежная система — PayPal;
- Один из самых популярных поисковиков мира — Yahoo;
- Онлайн версия газеты Wall Street Journal;
- Сеть для сбора лучших фотографий и видео из соц. сетей — Spotify.
Прочитать больше информации про веб сайты на Node можно в нашей статье:
Node JS обрел большую популярность благодаря возможности писать на едином языке локальные задачи и задачи связанные с серверной работой и базами данных. Платформа построена на движке V8 с использованием языков JavaScript, Си и C++. В свою очередь, V8 — это движок JS, который имеет открытый программный код.
Платформа отлично подходит для написания серверных приложения и чатов, но также можно писать десктопные программы при помощи NW JS или же AppJS. Есть возможность легкой интеграции различного API, что значительно ускоряет общее время разработки программ.
Пакетный менеджер
Node JS также имеет свой пакетный менеджер, который называется npm. Благодаря нему вы можете подключать сторонние библиотеки, запускать локальный сервер и делать ещё множество интересных вещей.
План курса
В ходе курса мы научимся работать с Node, рассмотрим его синтаксис, создадим несколько простых веб приложений, а также разберемся с фреймворком Express, который был разработан специально под Node JS и является отличным дополнением.
Перед началом просмотра курса стоит изучить HTML, а также JavaScript. HTML потребуется для написания разметки на сайте, а изучив дополнительно JS вам будет намного проще понимать что происходит в курсе, так как Node JS повсюду использует синтаксис языка JavaScript. Все дополнительные курсы вы можете посмотреть на нашем сайте.
Полный курс по JavaScript, комплексное обучение JavaScript. Пройдите курс по JavaScript и получите квалификацию JavaScript разработчик!
Этот курс подойдет разработчикам, которые:
— хотят стать JavaScript FullStack разработчиками
— хотят больше веселья и хардкора с технологиями, больше сложных и комплексных задач в работе
— имеют опыт работы с одной технологией или языком программирования и хотят получить практические навыки других технологий или переквалифицироваться
В рамках курса мы рассмотрим:
Ключевые особенности JavaScript — замыкания, особенности ООП и SOLID в JS, функционального и реактивного программирования, Promises и другие возможности ES6, Event Loop, а также разберём DOM API, Ajax и события в рамках разработки в браузере, и, конечно, прокачаем навыки в HTML и CSS. Научимся писать код на диалектах JavaScript, таких как TypeScript и JSX.
Помимо разработки клиентской части в браузере, мы также будем использовать серверную платформу NodeJS и её окружение. Изучим популярный фреймворк Angular с реактивными возможностями RxJS, а также библиотеки для написания web-приложений — ReactJS, Redux и современные подходы к разработке UI, такие как Polymer и набирающий звёзды Vue.
Мы будем собирать проекты для production с помощью Webpack, хранить данные в MongoDB, использовать TDD подход и писать тесты на различных фреймворках и уровнях.
Изучим полный ландшафт современных технологий Node / React / Angular / Vue / Web Components
Выполним домашние задания в формате мини-assignment, как на собеседованиях в российские и европейские компании
Углубимся во внутренние алгоритмы и логику работы фреймворков и рассмотрим спецификации
Выпускников этого курса ждут 63 работодателя
По окончании курса студент будет:
— Понимать принципы работы современных JavaScript фреймворков и библиотек
— Уметь применять паттерны проектирования (Event Loop, Flux, Immutable, Virtual DOM, Dependency Injection, Observables)
— Знать подходы при проектировании, организации, контроля состояния и тестирования серверных и клиентских приложений
— Выбирать подходящие инструменты для проекта
— Тестировать проект unit-тестами на разных уровнях
— Создавать веб-приложения с использованием современных технологий
ИНДУСТРИАЛЬНЫЙ ПРОЕКТ ОТ компании REVOLUT *
Возможные технологии для проектов — Node + Vue/Angular/React/Polymer.
*Индустриальный проект является техническим собеседованием в компанию, упрощая трудоустройство. Так же он дает возможность отработать навыки разработки на приближены к реальным кейсах и получить дополнительную консультацию от специалиста компании.
пять лет с Node.js / Habr
После пяти лет работы с Node.js я многое понял. Я уже делился некоторыми историями, но в этот раз хочу рассказать о том, какие знания дались труднее всего. Баги, проблемы, сюрпризы и уроки, которые вы можете использовать в собственных проектах!В каждой новой платформе есть свои хитрости, но в данный момент эти концепции для меня вторичны. Разобраться в своём баге — хороший способ гарантированного обучения. Даже если это немного болезненно!
Классы
Когда я только начал работать с Node.js, то написал скрапер. Очень быстро я понял, что если ничего не предпринять, то он будет осуществлять много запросов параллельно. Одно это стало важным открытием. Но поскольку я ещё не полностью усвоил мощь экосистемы, то сел и написал собственный ограничитель параллелизма. Он работал и проверял, что в каждый момент времени активны не более N запросов одновременно.
Позже мне понадобился второй уровень ограничений параллелизма, чтобы убедиться, что мы обслуживаем только N пользователей в каждый момент времени. Но когда я внедрил второй экземпляр класса, начали проявляться очень странные проблемы. Логи потеряли смысл. В конце концов я понял, что синтаксис свойств класса в CoffeeScript не предоставляет новый массив для каждого экземпляра, а один общий для всех!
Долго используя объектно-ориентированные языки программирования, я привык к классам. Но я не полностью понял результат скрытой работы конструкций языка CoffeeScript. Хорошо изучайте свои инструменты. Проверяйте все предположения.
NaN
Однажды работая по контракту, я внедрил сортировку на основе пользовательских параметров, которая должна была применяться в многоступенчатом производственном потоке. Но мы увидели действительно странное поведение — порядок не оставался одним и тем же. Каждый раз мы отправляли одинаковый набор пользовательских параметров, но порядок элементов изменялся!
Я был в замешательстве. Предполагалось, что это детерминистическая процедура. Те же данные на входе — те же данные на выходе. Поверхностное расследование не дало результата, так что я в конце концов реализовал подробное протоколирование. И вот здесь всплыли значения NaN. Они появились в результате предыдущих вычислений и посеяли хаос в алгоритме сортировки. Эти значения не равны самим себе или чему-нибудь другому, поэтому сломали транзитивность, которая необходима сортировке.
Будьте осторожны с математическими операциями в JavaScript. Лучше иметь сильные гарантии качества входящих данных, но вы можете также и проверить результаты своих вычислений.
Логика после callback’а
В моём коде использовался модуль Node pg, так что я начал рыться в каталоге node_modules и добавлять протоколирование. Я обнаружил, что модулю pg нужно было сделать некую внутреннюю очистку после завершения запроса, которую он делал после вызова предоставленного пользователем callback’а. Так что если выбрасывалось исключение, этот код пропускался. По этой причине pg был в плохом состоянии и не готов к следующему запросу. Я отправил пулл-реквест, который был полностью переделан и добавлен в версии 1.0.2.
Возьмите в привычку вызывать callback’и в последнюю очередь. Также хорошая идея предварять их выражением return. Иногда их нельзя поставить последней строчкой, но они всегда должны быть последним выражением.
Баги могут быть в отдельных строчках кода, но гораздо болезненнее, если баг в самой архитектуре приложения…
Блокировка цикла событий
По контракту меня попросили взять одностраничное приложение, написанное на React.js, и перенести его рендеринг на сервер. После исправления нескольких частей, из-за которых предполагался его рендеринг в браузере, всё заработало. Но я очень боялся, что синхронная работа поставит сервер Node.js на колени, так что добавил новую позицию сбора данных к нашей статистике, собираемой от сервера: как долго происходит рендеринг каждой страницы?
Когда данные начали поступать, стало ясно, что ситуация нехорошая. Всё нормально установилось, но некоторые из страниц рендерились более 400 мс. Слишком, слишком долго для рабочего сервера. Опыт работы с Gartsby хорошо подготовил меня к следующему шагу: рендерить статические файлы.
Хорошенько подумайте о том, чего вы хотите от своего сервера Node.js. Синхронная работа — это действительно плохие новости. Для рендеринга HTML нужно много синхронной работы, и это может затормозить процесс — не только с React.js, но и с легковесными инструментами вроде Jade/Pug! Даже фаза проверки типов на большой загрузке GraphQL может отнять много синхронного времени!
Конкретно для React.js многообещающий подход демонстрирует рендерер Rapscallion от Дейла Бустада. Он расщепляет всю синхронную работу для рендеринга дерева компонентов React в строку. react-server от Redfin — ещё одна, более тяжеловесная, попытка решить эту проблему.
Неявные зависимости
Я уже активно работал над контрактом и внедрял функции на хорошей скорости. Но мне сказали, что для следующей функции я могу свериться с ещё одним их приложением Node.js для справки и помощи в реализации.
Я взглянул на связующую функцию Express на выходной точке, о которой шла речь. И обнаружил целую кучу ссылок на req.randomThing и даже некоторые вызовы req.randomFunction(). Затем я пошёл смотреть на все связующие функции, по которым уже прошёл ранее, чтобы понять, что происходит.
Делайте зависимости явными, если только не возникнет абсолютная необходимость поступить иначе. Например, вместо добавления строк локального места действия в req.messages, передайте req.locale в var getMessagesForLocale = require('./get_messages') с прямым доступом. Теперь вы ясно увидите, от чего зависит ваш код. Это работает и в другую сторону — если вы разработчик random_thing.js, то определённо захотите знать, какие части проекта используют ваш код!
Данные, APIs и версии
Клиент хотел, чтобы я добавил функции в Node.js API, который работал как бэкенд для большого количества установленных нативных приложений на планшетах и смартфонах. Я быстро обнаружил, что не могу просто добавить поле, потому что разработчики приложений использовали защитное программирование — первым действием приложения при получении данных была проверка по строгой схеме.
Учитывая такую проверку и сами приложения, стало ясно, что понадобятся два новых типа версионирования. Один для клиентов API, чтобы они могли обновиться и получить доступ к новым функциям. Второй для самих данных, чтобы мы были уверены в надёжной реализации всех этих новых функций поверх MongoDB. Занимаясь добавлением этого в приложение, я рефлексировал на тему того, как следовало разрабатывать ту первую версию.
Есть нечто в изменяемых объектах JavaScript, что восхищает людей в связи с документоориентированными СУБД. «Я могу создать любой объект в своём коде, просто дайте сохранить его куда-нибудь!» К сожалению, эти люди как будто уходят после написания первой версии. Они не думают о второй, третьей или четвёртой версиях. Я научен, поэтому использую Postgres и с первой версии думаю о версионировании.
Оснащение
Как к главному эксперту по Node.js в большом проекте по контракту, ко мне подошел эксперт по DevOps поговорить о рабочих серверах. Требовалось длительное время, чтобы оснастить новые машины в дата-центре, и он хотел убедиться, что у него правильный план. Я ценил это.
Я кивал, когда он говорил, что на каждом сервере будет работать по одному процессу Node.js. Но прекратил кивать при упоминании, что у каждого сервера четыре физических ядра. Я объяснил, что на сервере можно будет использовать только одно ядро, и он пожал плечами — удалось достать только такие серверы. Они раньше работали как магазин под .NET, и у них стандартные решения. Вскоре после этого мы представили cluster.
Трудно понять происходящее, если переходишь с других платформ. Node.js всегда работает в одном потоке, в то время как почти все остальные веб-серверные платформы масштабируются с сервером: только добавляй ядра. Используйте cluster, но смотрите внимательно — это не волшебное решение.
Я написал уже много кода JavaScript и научен, что тестирование абсолютно и полностью необходимо. Это действительно так.
«Лёгкая работа»
Клиент объяснил, что их эксперты по Node.js ушли и я их заменяю. У компании были большие планы на этот проект, который являлся основной темой обсуждения до того, как я начал работу. Теперь клиент стал более решителен: он осознал, что дела обстоят неважно. Но в этот раз хотел сделать всё правильно.
Меня разочаровал уровень тестового покрытия, но в наличии хоть какие-то тесты. И порадовало, что JSHint уже на месте. Просто для уверенности я проверил текущий набор правил. И с удивлением обнаружил, что опция unused не активирована. Я включил её и был шокирован сплошным потоком новых ошибок. Несколько часов я сидел и просто удалял код.
Программировать на JavaScript трудно. Но у нас есть инструменты, чтобы сделать это более осмысленным. Научитесь эффективно использовать ESLint. С небольшими аннотациями Flow может помочь отлавливать неправильные вызовы функций. Много пользы с минимумом усилий.
Уборка после теста
Однажды меня попросили помочь разработчику разобраться, почему во время прогона теста возникает ошибка теста. Когда мы взглянули на выдачу от mocha, то не видели никакой ошибки во время этого сбоя. Когда внимательно изучили стек вызовов, стало ясно, что ошибку вызывает код, совершенно не имеющий отношения к этому тесту.
После более глубокого изучения выяснилось, что предыдущий тест объявлял о успешном завершении, в то же время инициируя ряд асинхронных операций. Исключения, которые приходили от того кода, обработчик уровня процесса mocha воспринимал как приходящие от текущего теста. Дальнейшее изучение показало, что mock-объекты, которые тоже не вычистили, просачивались в другие тесты.
Если вы используете callback’и, то все тесты должны завершаться методом done(). Это легко проверить во время просмотра кода: если в тесте присутствует какая-то вложенная функция, то вероятно должен быть done(). Хотя, здесь есть небольшая сложность, потому что вы не можете вызвать done, который изначально не передали функции. Одна из тех классических ошибок просмотра кода. Также используйте функцию sandbox в Sinon — она поможет убедиться, что всё вернулось на место по окончании вашего теста.
Изменяемость
На данном проекте по данному контракту стандартным способом проведения тестов было проведение юнит-тестов или интеграционных тестов отдельно. По крайней мере, при локальной разработке. Но Jenkins проводит полное тестирование, прогоняя оба набора тестов вместе. В одном из пулл-реквестов я добавил пару новых тестов, и они вызвали сбой в Jenkins. Меня это очень удивило. Тесты нормально завершались локально!
После некоторых бесплодных размышлений я включил режим подробного изучения. Запустил в точности ту команду, которую я знал, что Jenkins использовал для прогона тестов. Потребовалось некоторое время, но проблему удалось воспроизвести. Голова закружилась, пока я пытаясь выяснить, в чём же разница между прогонами. Не было никаких идей. Подробное протоколирование приходит на помощь! Спустя два прогона я сумел обнаружить некоторые различия. После нескольких фальстартов правильное протоколирование было налажено и стало ясно: юнит-тесты изменили некоторые ключевые данные приложения, которые использовались в интеграционных тестах!
Баги такого типа крайне сложно отследить. Хотя я горжусь, что нашёл этот баг, но всё больше и больше думаю о неизменяемости. Библиотека Immutable.js неплоха, но придётся отказаться от lodash. А seamless-immutable тихо падает, когда вы пытаетесь что-то изменить (что затем нормально работает в продакшне).
Вы можете понять теперь, почему меня интересует Elixir: все данные в Elixir всегда неизменяемые.
В немалой степени польза Node.js заключается в эффективном использовании большой экосистемы. Выборе хороших зависимостей и правильном управлении ими.
Зависимости и версии
Я использую инструмент
webpack-static-site-generator, чтобы генерировать свой блог. В рамках подготовки своего репозитория Git для публичного релиза я удалил каталог node_modules и установил всё с нуля. Обычно такой способ работает, поскольку я использую точные номера версий в package.json. Но не в этот раз. И всё перестало работать самым странным образом: без какого-либо осмысленного сообщения об ошибке.Поскольку я отправил определённое число пулл-реквестов в Gatsby, то довольно хорошо знаю кодовую базу. Первым делом добавил несколько ключевых выражений протоколирования. И появилось сообщение об ошибке! Правда, его трудно было интерпретировать. Тогда я погрузился в webpack-static-site-generator и нашёл, что он использует Webpack для создания большого bundle.js с кодом всего приложения, который затем передаётся для запуска под Node.js. Дурдом! И вот именно оттуда вылезла ошибка — из глубины этого файла, во время запуска под Node.js.
Теперь я быстро шёл по следу. Через несколько минут у меня был конкретный фрагмент кода, который выдался вместе с тем же сообщением об ошибке. Проблема оказалась в зависимостях новых функций языка ES6 в случае запуска под Node.js версии 4! Выяснилось, что у этой зависимости есть неограниченная подзависимость, которая вытаскивает слишком новую версию punycode.
Фиксируйте всё своё дерево зависимостей на конкретные версии с помощью Yarn. Если не можете, то фиксируйте прямые зависимости на конкретные версии. Но знайте, что оставшиеся незакреплёнными версии зависимостей могут привести к такой ситуации.
Документация и версии
На одном из проектов я использовал Async.js, особенно функцию filterLimit. У меня был список путей, и я хотел выйти в файловую систему, чтобы получить характеристики файла, который затем будет определять, должны ли пути остаться в списке. Я написал метод для фильтра нормальным асинхронным образом, со стандартной подписью async
callback(err, result). Но ничего не работало.Я обратился к документации, которая в то время была на главной странице проекта GitHub. Посмотрел на описание filterLimit, и там была ожидаемая подпись: callback(err, result). Я вернулся обратно к проекту и запустил npm outdated. У меня стояла v1.5.2, а последней числилась v2.0.0-rc.1. Я не собирался обновлять именно до этой версии, так что запустил npm info async для проверки, стоит ли у меня последняя версия 1.х. Так и было.
Всё ещё в недоумении, я вернулся к коду и добавил исключительно подробное протоколирование. Без толку. В конце концов, я пошёл к исходникам Async.js на GitHub. Что делает эта глупая функция? И вот тогда я понял, что произошло — в ветке master на GitHub был код 2.х. Чтобы посмотреть документацию для моей установленной версии 1.5.2, то нужно было искать в истории. Когда я сделал это, то нашёл правильную подпись callback(result) без возможности распространения ошибок.
Очень внимательно смотрите на номер версии документации, к которой обращаетесь. Тут легко облениться, потому что первая попавшаяся документация часто подходит: методы редко меняются или вы и так на последней версии. Но лучше проверить дважды.
Чего не понимает New Relic
Так что я приступил. В системе были на удивление исчерпывающие следы, как обрабатываются входящие запросы: работа промежуточного программного обеспечения Express и вызовы на другие серверы. Но я везде искал и не мог найти ключевого показателя для процессов: состояния цикла событий. Так что пришлось прибегнуть к обходному манёвру: я вручную высылал показатели от toobusy-js в New Relic и создал новый график на их основе.
С этими дополнительными данными было больше уверенности в правильности анализа. Конечно, скачки в показателях времени ожидания (latency) совпадают с тем, что New Rellic называет ‘time spent in requests’. Я посмотрел и с беспокойством обнаружил, что там сумма слагаемых не совпадает с результатом. Общее время, потраченное на запрос, и его составляющие — не совпадают. Иногда есть категория «Другое», которая пытается исправить ситуацию, в других случаях её нет.
Не используйте New Relic для мониторинга приложений Node.js. Этот инструмент не имеет понятия о цикле событий. Его нагромождённые графики ‘average time spent’ совершенно вводит в заблуждение — при условии медленного цикла событий выделенные конечные точки будут теми, которые сильнее всего откладывают цикл событий. New Relic может определить факт наличия проблемы, но не поможет вычислить её источник.
Если вам ещё нужны причины не использовать New Relic, вот пожалуйста:
- В окнах по умолчанию отображаются средние значения, плохой способ представления данных из реального мира. Следует пройти дальше за дефолтные окна, чтобы получить вразумительные графики, вроде 95%-ных. Но не чувствуйте себя слишком комфортно, потому что эти вразумительные графики вы не можете добавить на созданные под себя панели мониторинга!
- Он не понимает использования
clusterна одной машине. Если вы вручную отправите данные вроде показателей времени задержки для цикла событий изtoobusy-js, только один показатель в секунду победит для всего сервера. Даже если там четыре воркера.
Эмоциональные события запоминаются с наибольшей ясностью и точностью. Поэтому каждая из этих ситуаций надёжно сохранилась в моей памяти. Вы не запомните это настолько хорошо, как я. Может, если представить мою борьбу, то это поможет?
Удивительно, но изначально в этой статье я хотел описать в два раза больше ситуаций, достойных упоминания, многие из которых не относятся напрямую к Node.js. Так что ждите ещё постов вроде этого!
подборка лучших ресурсов для обучения
Каждый сеньор когда-то был джуном, но не каждый джун вырастет в сеньора. Подборка ресурсов для амбициозных и перспективных JavaScript Junior.
Погружение в язык
Без глубокого понимания концепций языка программист не может профессионально развиваться. У JavaScript джуна впереди увлекательная дорога, полная загадок и открытий. Выбирайте ваш любимый способ обучения и начинайте погружение!
Видео-уроки
ES6 и дальше
Современные JavaScript Junior, возможно, никогда не сталкивались с цепочками прототипов и асинхронными «велосипедами». Сейчас на фронтенде правит бал стандарт ES6. Смотрите один из самых лучших курсов в рунете от CodeDojo:
А джуниорам, владеющим английским, совершенно необходимо посмотреть великолепную лекцию freeCodeCamp.
Основы
Про то, что происходит под капотом, тоже нельзя забывать. Разобраться с конструкторами и прототипами поможет видеокурс freeCodeCamp и этот плейлист loftblog:
DOM
JavaScript был рожден, чтобы манипулировать веб-страницами. Это по-прежнему одна из основных задач языка. Лекция Дмитрия Лаврика окончательно прояснит все моменты работы с объектной моделью документа:
Книги
Держите лучшие в мире книги для JavaScript Junior, если вы еще не успели изучить их от корки до корки:
Онлайн-учебники
90% русскоязычных джуниоров учат JavaScript по учебнику Ильи Кантора. А вот еще один отличный ресурс с классической структурой «от простого к сложному».
Полезные статьи
Листание популярных интернет-сайтов IT-тематики – важная часть образования JavaScript Junior. Чтение статей помогает:
Документация
Последнее прибежище разработчика – документация языка. Вам придется обращаться к ней не раз, поэтому будьте знакомы, Mozilla Developer Network. А здесь вы можете узнать немного о темной стороне спецификации.
Инструменты и инфраструктура
Для эффективной и быстрой разработки важно обустроить удобную рабочую среду. Все современные проекты используют сборщики и системы контроля версий. JavaScript Junior должен в этом разбираться.
Node и сборщики файлов
Великолепный скринкаст Ильи Кантора введет вас в курс дела и поможет освоиться с платформой Node.js:
После этого можно переходить к изучению сборщиков: Gulp или Webpack на том же канале.
А вот несколько полезных статей для начала:
Git
Git – самая популярная система контроля версий, она используется во многих проектах, поэтому JavaScript Junior должен в ней разбираться. Основные сведения можно почерпнуть из книги Pro Git или видео-курса по основам Git. А эта замечательная интерактивная игра поможет разобраться с моделями ветвления.
Шпаргалки по командам сэкономят ваше время:
Отладка кода
Отладка – неотъемлемая часть программирования. Главный помощник JavaScript джуниора – консоль разработчика Google Chrome. Чем быстрее вы с ней подружитесь, тем эффективнее будет ваша работа. В помощь вам короткое, но очень информативное видео от школы Hillel:
Фреймворки
Многие компании создают свои продукты на базе современных JavaScript-фреймворков, которые позволяют с легкостью делать очень сложные вещи. Их изучение не только станет огромным плюсом в вашем резюме, но и позволит лучше понять механизмы работы и возможности языка.
React
Освоить основы самого популярного JS-фреймворка поможет этот учебник. В нем понятно разобраны все базовые вопросы, начиная с JSX-синтаксиса и заканчивая моделью Redux.
Еще пара статей по Redux с примерами:
Разобравшись, начинайте экспериментировать. Напишите собственный чат или попробуйте осилить вот этот мастер-класс по созданию бухгалтерского приложения:
Angular
Еще один популярный фреймворк, с которым может встретиться JavaScript Junior. Не путайте AngularJS (он уже устарел) и просто Angular. Проект активно развивается, выходят новые версии. Чтобы не потеряться в них, держите постоянно обновляющийся учебник. А если вы знаете английский, то обязательно посмотрите скринкаст по Angular 6. В качестве шпаргалки вполне подойдет этот конспект по Angular 5.
Священная война фреймворков в самом разгаре. Если вы еще не сделали свой выбор, возможно эта статья поможет Angular vs. React: что лучше для веб-разработки?
Vue
Про Vue.js мы тоже не забудем.
Практика для JavaScript Junior
Самое сложное для джуниора – превратить теоретические знания в практические умения. Вот несколько материалов вам в помощь:
А лучше всего создайте свою игру. Это полезно и интересно.
Прежде чем бросаться с головой в обучение, посмотрите это коротенькое видео об ошибках, которые совершают джуниоры:
Удачи вам, будущие сеньоры!
JavaScript. Полное руководство для современной веб-разработки
Ельцов Александр
Научился мыслить как верстальщик
Почти свободно владею HTML5 и CSS3. Но ещё не очень уверенно программирую на JS, jQuery и PHP. Практически закончил делать свой блог под управлением CMS WordPress. Один из вариантов шаблона выполнен на 80% на flexbox, второй вариант с использованием float, без flexbox. В настоящее время тестирую блог на ресурсах.
Начинал с поиска дохода в интернете в качестве фрилансера. Сейчас от этой идеи отошел и углубился в создание шаблонов. Не было общего понимания как и с чего начать. Не было системности в работе и прежде всего не было понимания необходимости исследования макета.
Что помогло принять решения для покупки курса? Понимание того, что без курсов я затрачу гораздо больше времени на постижение основ. Я приобрел базовые знания, которые, на сегодняшний день помогают мне осваивать новые практики, в том числе и на англоязычных ресурсах.
На этот год поставил задачу создать небольшую линейку шаблонов на WordPress. В следующем году это будет Joomla и затем Drupal. Развивайтесь!
Усаков Евгений
Мне вас посоветовал мой хороший знакомый, который уже был на тот момент вашим клиентом
Вопрос: Жизненный опыт?
Ответ: Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.
В итоге, когда в этом стало совсем скучно ковыряться, решил кардинально сменить профиль деятельности и стал ассистентом режиссера на региональном ТВ.
В перерывах между монтажом ТВ-программ решил начать самостоятельно изучать PHP, к тому же, в этот момент у меня появился курс по PHP от Webformyself — собственно, это и дало толчок к возвращению в профессию программиста, но уже с уклоном только на веб.
Первым коммерческим опытом веб-разработки был проект, который я разрабатывал на Joomla, это было долгое, трудное, малоденежное занятие, но я выдержал этот период, набрался опыта и начал понимать, как работать на результат, и как общаться непосредственно с заказчиком. Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://webformyself.com/jshop/).
Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика. Остановил свой выбор на PHP-фреймворке Yii2 и, без сомнений, приобрел курс на эту тему у команды webformyself (https://webformyself.com/yii2/).
Вопрос: Что Вы скажете по поводу возражений (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?
Ответ: В этом плане сомнения были минимальными, и только в одном — насколько быстро окупятся потраченные средства. А в том, что они окупятся, была полная уверенность.У меня есть убеждение, что инвестиции, вложенные в себя и своё развитие — обязательно принесут пользу.
Вопрос: Назовите самые значимые для Вас убеждения и ценности в жизни в целом и веб-разработке в частности?
Ответ: Главное в жизни — это любовь. Что касается веб-разработки — постоянное развитие и принятие новых вызовов.
Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?
Ответ: Была основная проблема: так как я был полным новичком в мире веб-разработки — у меня не было четкого структурированного плана о том, с чего начать, и в каком направлении действовать. После приобретения курса по PHP я узнал все основы этого языка, как строить приложения, и от этого уже появилось понимание и видение, как и куда это все развивать.
Вопрос: Каких успехов Вы достигли?
Ответ: Моя разработка стала более быстрой и качественной, я овладел несколькими технологиями, избавился от походов в офис, да и вообще профессия веб-разработчика позволяет мне зарабатывать в комфортных для меня условиях и в удобное время.
Вопрос: Какие перемены к лучшему произошли в жизни?
Ответ: Семья, дети, путешествия и мое хобби перешло в основную деятельность, которым я зарабатываю (это я про веб-разработку).
Унгер Олег
Я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться
Вопрос: Жизненный опыт?
Ответ: После школы поступал на программиста, но баллов не хватило. Учился на инженера-электронщика. Работал в разных сферах, в основном — на производстве. Та сфера, которая раньше приносила неплохой доход — перекочевала в Китай, работу стало сложно найти, да и надоело уже.
Вопрос: Опишите себя в начале пути?
Ответ: В начале пути я очень сомневался, стоит ли начинать. Меня очень мотивировал пример моего друга, который также начал с нуля и менее чем через год устроился на нормально оплачиваемую работу.
Вопрос: Опишите себя сейчас?
Ответ: Прошло почти три года, я уже обладаю определенными знаниями и постоянно получаю новые благодаря курсам от WebForMySelf.
Вопрос: Как Вы узнали о наших курсах?
Ответ: Стал искать, что же это за курсы, где так хорошо и подробно все объясняют. Нашел на YouTube, и далее поиски привели на сайт Webformyself.
Вопрос: Что впервые подумали, когда узнали о нашем проекте?
Ответ: Подумал, как хорошо, что столько информации есть в одном месте.
Вопрос: Вы испытывали какие-то сомнения?
Ответ: Честно говоря, сомнения были. Но я подписался на Премиум клуб. И я многому научился по обучающим видео: PHP, JavaScript, регулярные выражения, курс по объектно-ориентированному программированию (ООП PHP) и пр.
Вопрос: Что Вам понравилось?
Ответ: Мне очень понравилось, что бонусом к курсу шли другие курсы и видео из премиум доступа. И так удачно было, что мне не пришлось выбирать между Yii2 и Laravel, потому что они шли в комплекте.
Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?
Ответ: Мне пришлось бы потратить много времени на поиски более-менее структурированной информации по нужным темам.
Вопрос: Каких успехов Вы достигли?
Ответ: Как-то незаметно для себя, стал разбираться в том, что раньше казалось недоступным для понимания. На данный момент почти год работаю программистом (Yii, MS SQL Server, JavaScript), участвую в разработке нового функционала и сопровождении проекта CRM в организации, занимающейся системами безопасности, автоматики и связи.
Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?
Ответ: Чувствую себя уверенно, оптимистично. Планирую и дальше повышать свой уровень.
Вопрос: Какие перемены к лучшему произошли в жизни?
Ответ: Я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться. Будущее уже не такое туманное и пугающее, как раньше.
Новиков Дмитрий
Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы
Вопрос: Опишите себя в начале пути?
Ответ: В начале пути для меня веб-программирование было «темным лесом», где было страшно и неуютно, но жажда знаний заставила двигаться вперед, да, на Делфи мне приходилось писать парсеры, были написаны Ebay снайпер, программа для участия на тендерах. На данный момент я понимаю, что написать подобное лучше на PHP (не нужно «придумывать велосипед» с библиотекой Synapse).
Вопрос: Что Вы скажете по поводу возражений (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?
Ответ: Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы — дорогу осилит идущий.
Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?
Ответ: Главной проблемой до приобретения курсов был мой нулевой уровень знаний. Да, конечно, можно на ютубе смотреть кучу бесплатных обучающих роликов, тут ты не потратишь денег, но зато потратишь самое ценное — время. На ютуб большинство роликов содержат кучу воды, так как авторы стараются сделать видео максимально длинным, чтобы заработать на рекламе.
Вопрос: О чем Вы думали в начале пути?
Ответ: Нашел через интернет, на тот момент нужно было срочно сделать сайт-галерею, и я приобрел первый курс по верстке. Тот проект я благополучно завалил — не хватало знаний. Сверстать макет я смог, прикрутил даже JQuery, а дальше мои знания закончились, нужна была админка, нужно было хранить где-то данные. Тут произошло мое знакомство с паттерном MVC и желание освоить PHP (с MySQL проблем не было, так как по роду своей деятельности я хорошо знаком с SQL, часто приходится вытаскивать данные из БД в разрезе складов, контрагентов и т.д.).
Вопрос: Какие изменения стали происходить, когда Вы узнали о курсах?
Ответ: Когда я узнал о курсах, изменений никаких не происходило, я просто приобрел сначала один курс и начал изучать, потом второй…. изменения стали происходить во время изучения материала, и эти изменения однозначно в лучшую сторону.
Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?
Ответ: Вряд ли бы что-то серьезное случилось, веб-разработка — это мое хобби, я не беру денег за это, и берусь лишь за то, что мне действительно интересно. Ну, а что касается именно Ваших продуктов, именно они направляли меня в мире веб-разработки, так как в начале пути я был подобен слепому котенку, мои знания были нулевыми, и я не знал, куда идти, и что делать. Я считаю, в начале пути просто необходим наставник, указывающий тебе путь, и этим наставником для меня как раз и стали Ваши курсы. Да, не все сразу получилось, но главное — не сдаваться.
Вопрос: Каких успехов Вы достигли?
Ответ: Буквально за 2 недели написал сайт для сервисных центров Huawei в Казахстане, сейчас этот сайт уже не действует, так как Huawei интегрировали внесение заявок в свою систему. Писал сайт для транспортной компании с возможностью отследить расположение груза онлайн, сайт интернет-магазина, сайт для сестры — она практикующий психолог. Особо-то и хвастаться нечем, это для меня прежде всего хобби.
Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?
Ответ: Планы на будущие, наверное, не останавливаться на достигнутом и продолжить изучение новых технологий в веб-разработке. Возможно, попробую себя в мобильных приложениях, если будет хватать времени.
Левченко Евгений
Ваш курс решил сразу две проблемы. Время и деньги
Меня заинтересовала адаптивная вёрстка, и я купил полный курс по акции.
До сих пор мне не хватает знаний по Java Script, а также хочу ещё изучить и PHP5 MySQL. Этим я займусь немножко позже, пока научился создавать простые странички, и создал подруге сайт для продажи мыла ручной работы.
До этого читал книгу по HTML5 Дженнифер Роббинс, и узнал про резиновые сайты, но понял что этих знаний недостаточно, чтобы создавать сайт с адаптивной вёрсткой. Ваш курс решил сразу две проблемы. Время и деньги.
Как я писал, я пока в процессе изучения курса. Но знания которые я уже получил, бесценны.
Сейчас всё больше людей используют интернет с маленьких экранов и это также важно, как создавать полноценную страницу для мониторов. Чтобы не потерять публику использующих смартфоны и планшеты.
Желаю Вам дальнейшего процветания и поменьше конкурентов. Ваши курсы действительно мне понравились больше, чем у других инфо-бизнесменов.
Галкин Игорь
Я научился понимать чужой код PHP и писать свой, составлять MySQL запросы, встраивать в сайт любые скрипты: различные меню, слайдеры, табы, а также редактировать их под себя
Создал два интернет-магазина на заказ. Один для книжного магазина, другой для зоомагазина.
Создать интернет-магазин казалось мне невыполнимой задачей, особенно такого функционала как корзина, авторизация на сайте, сортировка продуктов. Принять решение о покупке курса интернет-магазин под ключ помогло несколько факторов: во-первых, просьба знакомого создать для него интернет-магазин, т.е. был уже потенциальный заказчик; во-вторых, в качестве ваших продуктов я не сомневался, т.к. давно был подписан на ваши бесплатные уроки и мне нравилась ваша манера подачи материала; в-третьих, наверное самое главное, я надеялся с его изучением сделать огромный скачок, именно скачок, а не шажок, в применении на практике знаний по PHP и MySQL, JavaScript и jQuery. Что собственно и произошло.
Я научился понимать чужой код PHP и писать свой, составлять MySQL запросы, встраивать в сайт любые скрипты: различные меню, слайдеры, табы, а также редактировать их под себя. Для человека, который делал простенькие сайты только на HTML и CSS, я думаю это большой шаг к созданию профессиональных сайтов.
Мне остается только поблагодарить вас за создание такого проекта, как WebForMySelf, за те знания, что вы дарите нам всем, пожелать вам здоровья и успехов.
Rietveld Julia
…И перед тем как сдаться я увидела в ютюбе ролик от Автора команды WebForMyself. Посмотрела один, второй и не смогла оторваться
Привет, меня зовут Юлия Ритфелд, я фронт энд разработчик в Министерстве Юстиции в Нидерландах.
Я очень сомневалась купить ли мне курс о Ларавел. Я уже 5 лет работаю верстальщицей и графическим дизайнером и мне всегда казалось, что php (и другие языки бэкенд) — это удел супер умных программистов. Но в какой-то момент мой начальник сказал, что мне надо тоже выучить пхп, а именно Ларавел, чтобы помочь в разработке аппликаций. Я очень долго сомневалась потяну ли такую сложную теорию. Как я как креативный человек смогу ли строить сложные вещи, да еще и в пхп?
Стоит ли инвестировать столько времени и средств?
Я посмотрела курс о Ларавел на lynda.com. Потом купила несколько курсов об этом фреймворке на Udemy.com. Потом были курсы на pluralsight.com. Все было сложно. И даже не в языке дело, на английском я учусь и работаю уже 2 десятка лет. И перед тем как сдаться я увидела в ютюбе ролик Виктора. Посмотрела один, второй и не смогла оторваться.
Но пойдя на данный момент уже 19 из 39 уроков (50%) теоретической части курса о Ларавел хочу сказать с полной уверенностью, что все мои страхи были напрасны. Виктор просто предугадывает мои вопросы и мысли типа ‘а что если..’. Видео записаны в отличном качестве и картинки на которых он объясняет о том, что такое, например, Middleware для меня как визуального человека просто спасение.
Я даже добавила этот курс в свой профиль ЛинкдИн. По качеству этот курс превосходит все, что на данный момент есть на мировом рынке по этому фреймворку.
С уважением и признанием,
Юлия Рифтелд
Наталья Синицина
Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать
Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать. Я знаю, как находить свои ошибки или опечатки, как написать движок под свои нужды, как его можно изменить, модернизировать.
Больше всего, помимо качественной подачи материала, мне нравится стиль подачи.Т.к. всё же мы обучаемся самостоятельно, то многие моменты приходится пересматривать несколько раз. Мне нравится чёткая структура уроков, я сразу знаю какой урок мне необходимо повторить, чтобы уточнить какой-либо вопрос. Я изучаю записи по нескольку часов и не устаю от прослушивания: голос у авторов приятный, спокойный, не торопливый. Это очень важно для меня.
Очень хочу, чтобы мой отзыв помог многим людям, которые находятся в поиске себя, выбирают новое направление деятельности.
Курсы команды WebForMySelf — это всегда подробное разъяснение важных деталей. Я уверена, после прохождения одного курса, вам захочется приобрести еще один, т.к. знания, полученные в результате обучения вы сможете сразу монетизировать — клиенты увидят в вас профессионала и будут заказывать работы именно у вас. Всего вам доброго и финансового благополучия.