Full-Stack JS: детальний план з вивчення Джаваскрипт [*]


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Веб-розробка – один з найпростіших і тому популярніших напрямів серед початкуючих програмістів. Для роботи досить будь-якого текстового редактора і браузеру, не треба вивчати алгоритми на просунутому рівні, результат кожного етапу написання програми наочний – загалом, переваг багато. Ключовою навичкою в контексті веб-розробки вважається знання JavaScript (Джаваскрипт).

Зараз JS дуже швидко розвивається, а тому при вивченні мови легко заплутатися. Ми пропонуємо вашій увазі учбовий план із зручною структурою, який охоплює усі необхідні аспекти JavaScript і суміжних технологій.

Чому Джаваскрипт?

Варто відмітити відкритість мови – компанії, що зазвичай змагаються один з одним, співпрацюють з метою розвитку JavaScript. Мова дуже гнучка і підійде прибічникам як об’єктно-орієнтованого, так і функціонального підходу. Величезна кількість бібліотек і фреймворков дозволяє з легкістю вирішувати будь-які типи завдань, а серверна платформа Node.js дає можливість використати мову не лише у браузері, але і в консолі. Ви навіть можете писати настільні і мобільні застосування: перші – за допомогою фреймворка Electron, а другі – на NativeScript або React Native.

Основи

Спершу необхідно вивчити основні поняття JavaScript, веб-розробки і програмування в цілому:

  • об’єктно-орієнтований JS – конструктори і фабрики, спадкоємство;
  • функціональний JS – функції вищого порядку, замикання, рекурсія;
  • специфікації тестів Jasmine;
  • основи HTML, CSS і jQuery.

Git

Git – необхідний розробникам інструмент, тому познайомитися з ним треба якомога раніше. Ось основні навички, які ви повинні мати :

  • створення і переміщення файлів в каталогах;
  • ініціалізація і коміти в Git;
  • налаштування репозиторіїв в GitHub.

Алгоритми і структури даних

Потім варто вивчити алгоритми (зокрема, поняття складності алгоритмів), а також базові структури даних: зв’язні списки, черги, стеки, двійкові дерева пошуку і хеш-таблиці. У цьому вам допоможе наша серія статей.

Бекенд

Node.js

10 років тому джаваскрипт можна було використати тільки для фронтенд-разробки. Тепер завдяки Node.js одним “фронтом” справа не обмежується. Node – це просто середовище для виконання JS-коду на стороні сервера, тому вам не доведеться вивчати новий синтаксис, але знадобиться імпортувати і експортувати файли, розбивати код на модулі і використовувати менеджер пакетів npm.

Сервери, HTTP, Express.js

Після вивчення Node варто продовжити знайомство з бекенд-разробкою і розібратися в серверах і маршрутизації. Можна розпочати з портів і протоколів з акцентом на HTTP, а потім зайнятися Express – Node- бібліотекою для обробки запитів.

Асинхронний JavaScript

Асинхронність є однією з особливих фіч джаваскрипта, хоча і створює деякий розкол серед розробників: деякі її люблять, а деякі – ненавидять. Вам варто розуміти плюси і мінуси цієї технології. Розпочніть зі стека викликів, циклу подій і колбеків, а потім перейдіть до вивчення промисів.

Бази даних, схеми, моделі і ORM

Бази даних – один з найважливіших елементів веб-розробки. Якщо вашому додатку треба завантажувати або зберігати які-небудь дані, які не втрачаються при оновленні сторінки, доведеться використати БД. Треба навчитися розрізняти реляційні і нереляційні бази даних і розібратися в типах зв’язків. Потім вивчити SQL і познайомитися з різними системами управління баз даних. Уміння працювати з ORM теж не буде зайвим.

Фронтенд

HTML і CSS

HTML і CSS – це основа основ для будь-якого веб-розробника. Вам не обов’язково знати їх досконало, але розбиратися в них ви повинні. Також можна вивчити яку-небудь популярну бібліотеку (наприклад, Bootstrap) і CSS-препроцесор типу SAAS – він допоможе зробити CSS схожим на звичайний код. Для спрощення роботи з HTML можна вибрати один з популярних шаблонізаторів, наприклад, pug.

jQuery і маніпуляція DOM

Створивши зовнішній вигляд сторінки за допомогою HTML і CSS, ви використовуватимете транслятори подій і бібліотеку jQuery для управління DOM. Багато хто вважає, що jQuery даремна і її скоро замінять Angular і React, але вона шалено популярна, і тому її варто знати. Крім того, одного разу ви потрапите в ситуацію, коли забивати цвяхи React- мікроскопом вам буде незручно, і тоді на допомогу вам прийде легка jQuery.

AJAX

Якщо ви хочете, щоб додаток не перезавантажував сторінки після кожної операції з базою даних, вам точно знадобиться AJAX – він відправляє фонові асинхронні HTTP-запити, відповіді на які оновлюють лише частину відображення. Працювати з AJAX можна через jQuery за допомогою методу .ajax.

Просунуті теми

Розробка через тестування

Test Driven Development, чи TDD – це така техніка розробки, при якій створення ПЗ розбивається на безліч невеликих циклів: спочатку пишуться тести, які покривають бажану зміну, потім пишеться код, який ці тести проходить. Після цього робиться рефакторінг коду, при необхідності пишуться нові тести. Якщо якісь тести ділянка коду не проходить, це виправляється.

У випадку з JavaScript радимо звернути увагу на фреймворки Jasmine, Chai і Mocha. До речі, на нашому сайті є цикл статей, присвячений тестуванню фронтенда – може згодитися.

Веб-сокети

Цій темі варто приділити особливу увагу, оскільки веб-сокети дуже корисні. Протокол WebSocket, на відміну від HTTP, дозволяє працювати з двонаправленим потоком даних, що робить цю технологію унікальною. Найпоширенішою реалізацією є бібліотека socket.io – розібратися з нею і застосувати отримані навички на практиці допоможе наше керівництво по створенню розрахованої на багато користувачів браузерной гри.

ES6, Babel, Webpack

Зараз основним стандартом є ES6 (ES2015), але вже прийнятий ES2016, а ES2017 знаходиться в розробці, тому треба завжди бути в курсі оновлень і використовувати їх. Проблеми сумісності вирішуються всього парою інструментів :

  • Babel – компілює ES6-код (скоро з’явиться підтримка ES2016) в ES5, який підтримується усіма браузерами. Він навіть уміє компілювати JSX/React-компоненти, що робить його незамінним для будь-якого веб-розробника;
  • Webpack – збирає усі ваші початкові файли (картинки, шрифти, таблиці стилів, JS-файли і так далі) в єдиний граф залежностей. Він не згодиться при створенні маленьких застосувань, але при роботі з React його допомога неоцінима.

React і Redux

React – бібліотека для створення призначених для користувача інтерфейсів. Вона була створена компанією Facebook в 2013 році і досить швидко стала популярною серед розробників. Вам варто прочитати ці 9 порад, а потім розібрати написання простого застосування, щоб зрозуміти, як працює React і для чого він потрібний. React згодиться не лише для фронтенд-разробки: Facebook випустила варіанти фреймворка для мобільної (React Native) і VR-розробки (React VR).

Redux – контейнер передбачуваних станів, зазвичай використовуваний в зв’язці з React. Його можна використати для скорочення коду завдяки модульності. Особливо корисний в розрахованих на багато користувачів додатках, працюючих в режимі реального часу, наприклад, в іграх.

Аутентифікація, сесії, cookies

Вам також варто розібратися, як додатки взаємодіють з користувачами, обробляють вхід в обліковий запис і вихід з неї, видають привілею. Для відстежування особи користувача впродовж сесії використовуються cookies – невеликі текстові файли, що передаються сервером браузеру у відповіді на HTTP-запит. А для забезпечення зв’язку бази даних і сторіночок авторизації можна використати бібліотеку express – session.

Веб-безпека

І, нарешті, варто звернути увагу на безпеку. Важливо вивчити як методи атак, так і способи захисту від них.

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Коментарі 1

  • Це знаєте, всі жартують в неті, що HTML – це мова програмування)) Ну зрозуміли, про що я))) Але якщо підійти до цього без гумору, то шлях до програмування та і взагалі до всього іншого я пробивав саме через хтмл та цсс, так, до програмування це не має відношення. Але потім, коли починаєш цікавитися, вже пізнаєш і джаваскрипт, і джаву, і аякс, поступово, сходинка за сходинкою, вникаєш в цей світ. І до речі цей план вивчення Джаваскрипту- дуже гарний!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *