Навчальний план по освоєння сучасного javascript, бібліотека програміста

Для чого це потрібно

Ця програма для вас, якщо:
* Ви вже знайомі з основними концептами програмування, як наприклад, змінні і функції
* Ви вже займалися back-end розробкою використовуючи, скажімо, PHP і Python, і, можливо, використовували front-end бібліотеки, такі як jQuery, для якихось дрібних завдань
* Ви хочете серйозно вникнути в front-end розробку, але вже тонете в фреймворками і бібліотеках, ще навіть не почавши нею (розробкою) займатися

Теми, які ми торкнемося

згадані ресурси

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

У цього є свої наслідки.
Спочатку хороші:
* Для даного типу контенту, посилати тільки дані набагато швидше, ніж посилати цілі HTML сторінки
* Клієнт негайно ж може змінювати контент, навіть не оновлюючи сторінку браузера (звідси і назва «Додаток однієї сторінки»)

І погані:
* Початкова завантаження займає більше часу, коли кількість даних зростає
* Тепер треба знайти місце для зберігання і управління даними на стороні клієнта теж, в разі, якщо ви хочете кешувати їх або перевірити

І неприємні:
* Вітаю! Тепер вам доведеться возитися з клієнтської здебільшого не менше, ніж з серверної

Клієнт-серверний спектр

Чи є все-таки сенс так потіти, якщо існує так багато поганих сторін? Чому б просто не користуватися старими добрими PHP-додатками?

Ну добре, уявіть, що ви створюєте калькулятор. Якщо користувач хоче знати, скільки буде 2 + 2, буде безглуздо проробляти шлях назад до сервера, щоб порахувати результат, якщо браузер і сам може це зробити.
З іншого боку, якщо ви створюєте чисто статичний сайт, наприклад блог, то було б абсолютно правильно генерувати кінцевий HTML на сервері і не переживати більше за нього.

Правда в тому, що більшість веб-додатків залишаються десь між. Знати б де ...
Але добре те, що спектр наш не нескінченний: ви не можете почати з чисто-серверної сторони і потихеньку рухатися в бік чисто-клієнтської сторони додатки. В якийсь момент (в момент, так званого «поділу»), вам доведеться насильно зупинитися і рефактору все що ви написали або просто залишити масу непідтримуваного спагетті-коду (це особливо небезпечний і специфічний вид поганого коду - прим. Перекладача).

Ось чому не можна «просто використовувати jQuery» для всього підряд. Вам напевно здається, що jQuery - це скотч. Безумовно, це приголомшлива річ для вирішення маленьких проблем, але якщо ви вирішуєте їм все більше і більше проблем, код починає виглядати огидно.

Тиждень №1: Починаємо вчити React

Тепер, знаючи основи синтаксису мови і розуміючи як додатки можуть бути такими складними, давайте поговоримо про щось особливе. З чого почати?

Звичайно з вивчення React!

React - це UI-бібліотека, розроблена і викладена у відкритий доступ компанією Facebook, вона бере на себе відповідальність за перетворення даних в HTML.

Не зрозумійте мене неправильно, я не можу стверджувати, що React - це найкраща бібліотека (так як це дуже суб'єктивно), але можу сміливо стверджувати, що вона дуже хороша.

* React може і не найпопулярніша бібліотека, але вона досить популярна
* React може і не найлегша бібліотека, але вона досить легка
* React може і не найпростіша бібліотека, але вона досить проста у вивченні
* React може і не найприємніша для вивчення бібліотека, але вона досить приємна

Іншими словами, React може бути не найкращим вибором в будь-якій ситуації, але я впевнений, що він самий надійний. І повірте мені, початок - це не найкращий час для того, щоб ризикувати при виборі технології.

Також React навчить вас деяким основним концептів, таким як: компоненти, стан програми та функції без стану, які пізніше можуть виявитися дуже корисними, незалежно, який фреймворк або яку бібліотеку ви виберете в кінцевому підсумку.

Нарешті, у React є велика екосистема інших бібліотек, які відмінно працюють з ним в зв'язці. І його популярність говорить про те, що ви завжди зможете знайти допомогу на таких сайтах, як StackOverflow (або GitHub - прим. Перекладача).

Я особисто рекомендую курс Wes Bos - React для новачків. Саме за допомогою нього я особисто вивчив React, а він до того ж ще й повний кращих практик для React.

Якщо вам подобається вчитися послідовно, ви напевно хотіли б спочатку гарненько розібратися в основах мови, перш ніж займатися чим-небудь іншим. Але це буде рівнозначно тому, як якщо б ви вчилися плавати, вивчаючи анатомію людини і динаміку рідини. Безумовно, це відіграє величезну роль в плаванні, але набагато веселіше і практичніше було б просто стрибнути в басейн!

Тиждень №2: Ваш перший проект з використанням React

Давайте припустимо, що ви вже завершили курс по React. Якщо ми з вами схожі, то дві речі, швидше за все, будуть правдивими:
* Ви вже встигли забути половину того що вивчили
* Ви вже чекаєте не дочекаєтеся, застосувати свою другу половину отриманих знань на практиці

Мені здається, що найкращий спосіб вивчити фреймворк або мова - це використовувати його. І впроваджувати щось нове в свої власні проекти - це найкраще що можна придумати, щоб освоїти це «щось нове». Ваш особистий проект може бути яким завгодно: від односторінкового веб-сайту до складного веб-додатки, але у мене є відчуття, що редизайн свого веб-сайту і є та золота середина, з якої варто почати. До того ж, я знаю, що ви, можливо, не звертали уваги на нього (свій веб-сайт) вже довгий час.

Раніше я говорив про те, що використання додатків однієї сторінки зі статичним контентом може бути зайвим, але у React є секретна зброя - Gatsby. статичний генератор сайтів для React, який дозволяє вам «схитрувати» і отримати всі переваги React, без всіх негативних сторін.

Тиждень №3: Освоюємо ES6

У моїй спробі вивчити React, я дійшов до того моменту, коли я міг просто копіпаст код з прикладів, але також було ще багато того, що я не розумів.
Зокрема, я був не знайомий з такими, недавно прийшли до нас з ES6 особливостями, як:
* Деструктуризація об'єктів
* класи
* Стрілочні функції
* Оператори розширення

Якщо у вас така ж ситуація, то потрібно трохи часу, щоб освоїти ES6. Якщо вам сподобався курс React для новачків, то вам напевно не терпиться вже пройти відмінний курс ES6 для кожного від Wes Bos. Або, якщо ви віддаєте перевагу безкоштовні ресурси, то вам варто прочитати книгу Nicola Bevacqua - ES6 на практиці. Хорошим вправою для освоєння ES6, було б пройтися по старому коду (наприклад, по тому, що ми писали у другому тижні) і конвертувати його в більш короткий за допомогою ES6.

Тиждень №4: Відкриваємо для себе управління власністю

На цьому етапі ви вже повинні вміти створювати простий front-end зі статичним контентом за допомогою React. Але справжні веб-додатки не статичні. Вони повинні отримувати звідкись дані, з якої-небудь бази даних, скажімо. До цього ми могли просто відсилати дані окремих компонентів, але такий підхід передує безладу.

Що якщо два компонента повинні будуть відобразити одні й ті ж дані, наприклад? Або потребують обміну інформацією? Ось тут-то і приходить на допомогу управління власністю. Замість того щоб зберігати ваш стан (тобто. Дані) в компоненті, ви залишаєте його в глобальному сховище, яке в потрібний момент посилає його (стан) до ваших React-компонентів:

У світі React, найпопулярніша бібліотека для управління станами називається Redux. Вона не тільки допомагає зібрати воєдино всі ваші дані, але також і пропонує нам деякі протоколи для управління цими даними.

Можна порівняти Redux з банком: ви не можете звернутися до локальної гілці і змінити ваш поточний баланс ( «а додай-ка мені тут парочку нулів!»). Замість цього, ви заповнюєте форму, передаєте її працівнику банку, у якого є права на виконання вашого вимоги. Так само, Redux не дасть вам змінити глобальне стан безпосередньо. Замість цього, ви пускаєте в хід редуктори - спеціальні функції, які проводять операції і повертають нове, оновлене стан, як результат.

Результат цієї додаткової витрати часу - це високостандартізірованний і підтримуваний потік даних в вашому додатку і доступ до таких інструментів, як Redux Devtools. для візуалізації цих даних.

Бонусна тиждень №5: Конструювання API з GraphQL

До сих пір ми багато говорили про клієнтської частини програми, але це тільки півсправи. І навіть не занурюючись в глибини екосистеми Node, все одно необхідно розглянути один з ключових аспектів будь-якого веб-додатки: як дані переходять від сервера до клієнта. Як і все інше, ця частина розробки з часом дуже спритно змінюється. GraphQL (ще один open-source проект від Facebook) пропонує серйозну альтернативу традиційним REST API.

Ця нова стратегія стає особливо корисною, коли вам потрібно зробити запит у кількох джерел даних. Як і в прикладі зі списком покупок, ви тепер можете отримати дані з усіх джерел за один-єдиний запит.

За останній рік, GraphQL непогано нашумів, а багато проектів (такі, як Gatsby) планують адаптуватися під нього. Сам по собі GraphQL - це протокол, але краща його реалізація на даний момент, це, напевно, бібліотека Apollo. яка, до того ж, відмінно працює з Redux. На жаль, до сих пір відчувається брак матеріалу по GraphQL і Apollo, але, сподіваюся, документація Apollo введе вас в курс справи.

По той бік React

Я рекомендував вам почати з React, тому що це надійний вибір, але це ні в якому разі не означає, що це єдиний хороший front-end стек. Якщо ви хочете продовжувати розвиватися, то ось вам два ради:

Vue - це відносно нова бібліотека, але її популярність зростає з рекордною швидкістю і вона вже адаптована великими компаніями, особливо в Китаї, де ця бібліотека використовується в Baidu і Alibaba (китайський Google і Amazon). А ще це офіційний front-end шар для PHP фреймворку Laravel.

У порівнянні з React, ось деякі хороші риси Vue:
* Офіційно підтримувані маршрути і бібліотеки для керування станами
* Фокусування на продуктивності
* Поріг входження нижче, завдяки використанню шаблонів, заснованих на HTML

Залишається лише 2 речі, завдяки яким все ще існує відрив React від Vue, це: розмір екосистеми React і React Native. Але я не здивуюся, якщо незабаром побачу Vue з React нарівні.

Що далі?

Зараз у вас повинен бути вже пристойний запас знань по front-end стеку і, сподіваюся, ви гарненько попрацювали над тим, щоб домогтися гарної продуктивності.

Я не можу виписати тут все, але не впадайте у відчай! Перший крок завжди найскладніший, і знаєте що? Ви його вже зробили, прочитавши цей план. Тепер ви розумієте, як різноманітні шматочки екосистеми підходять один до одного, тепер ваша задача лише зрозуміти, що ви хочете вчити далі і освоювати нову технологію щомісяця!

Будьте на зв'язку

Скажімо, чому б не почати з вивчення ангуляр, або навіть краще з самого нового, самого свіжого другого Полимера?

Говонокодери після такого получаються

Очікував пару слів про ангуляр, на жаль. Але все одно спасибі за пояснення принципів взаємодії технологій, швидше за все дана модель роботи веб додатків так само підходить і для ангуляр, тільки там інші назви стеків технологій.

Задерло це разнобезобразіе!