Angular2 близько

Ну, насправді не дуже…

Angular, напевно, самий популярний js-фреймворк. Принаймні, жоден холівар без його згадки не обходиться. І як ми всі вже знаємо, готується до виходу друга версія цього фрэймворка. Яка, по суті, буде іншим інструментом, призначеним для вирішення інших цілей. Думаю, до місця буде наступна картинка, що гуляє в мережі.

image

Але поки це тільки абстракція. Поточний стан нового Angular це 40-я ітерація альфа версії, яка доступна вже з 9 жовтня. Звичайно, використовувати другий Angular на продукції, ніяк не можна, але подивитися, що він готує, можна. Власне, що я і хочу показати.

Пошукавши кілька гайдів і туториалов за Angular 2.0, можу з упевненістю сказати, що жоден з них не є робочим — настільки серйозні зміни між ітераціями. Навіть «п'ятихвилинний старт» на офіційному сайті не працює при точному копіюванні коду і вимагає додаткової уваги.

Але до радості новачків існує пісочниця для Angular 2.0, що включає в себе більш-менш стабільну ітерацію з усіма залежностями, які необхідні для оптимальної роботи. Це 20-я ітерація, яка вийшла ще далекої весни і як не дивно не містить деяких фішок, про яких можна прочитати в якому-небудь мануалі. Але для демонстрації, думаю, цього вистачить.
Що ж зміниться в новому Angular у порівнянні з поточною версією. Якщо в двох словах, то це:

  1. Підтримка тіньового DOM;
  2. Використання ізольованих контекстів замість scope (щось схоже на синтаксис controllerAs, але доступне «з коробки»);
  3. Відмова від концепції опису директив на користь створення компонентів для програми з використанням класів і анотацій (фішки тіньового DOM).


Крім цього, розробники вирішили відмовитися від головної особливості Angular 1.х — двосторонній прив'язки даних. Все це повинно привести до зростання продуктивності додатків на даному фрэймворке.
Весь інший матеріал можна знайти в мережі, якого у неї величезна кількість.

Для того, щоб порівняти два практично різних фрэймворка, я вирішив написати одне і теж шаблонне додаток. Це PhoneCat з офіційного сайту Angular версії 1.х. Переосмислення для першої версії і створення на другий.
Щоб полегшити собі завдання, додаток, яке буде написано на першій версії, буде написано у стандарті мови 2015 року або es6, так як це один із стандартів, які Angular 2.0 буде підтримувати «з коробки». Це говорить про те, що розробники замінюють власні модулі Angular версії 1.х на модулі мови сучасного стандарту.

І, власне, ось що вийшло…

Bootstrapping
Або ініціалізація програми.

image

У Angular 2.0 пропадає всім відома директива ng-app, яка необхідна для встановлення точки входу в програму. Замість цього необхідно оголосити головний компонент (class App), який в свою чергу буде підтягувати інші компоненти програми.

Після імпорту всіх залежностей головний модуль» за допомогою анотацій Component й View ми описуємо наш компонент: за яким селектору він буде доступний, і який шаблон буде підставлений на його місце. Тут же вказуються залежності всіх інших компонентів, які будуть застосовуватися на шаблоні основного. Наприклад, директива For або свій компонент, такий як phoneItem. У результаті ми повинні отримати деяку деревоподібну ієрархію компонентів, які опосередковано або прямо залежать від головного. І до речі, питання організації даної ієрархії у вигляді файлової структури залишається відкритим, оскільки незрозуміло, як організовувати додаток. Або зберігати компоненти різного рівня ієрархії програми на одному рівні файлової системи або плодити нескінченні гілки каталогів?

Для своїх шаблонних додатків, грунтуючись на їх складності та кращі практики організації проектів, я вибрав наступні структури.

image

Після всіх оголошень виробляємо ініціалізацію додатки даною інструкцією bootstrap(App);
Варто зауважити, що ініціалізація програми на Angular версії 1.х не багатьом відрізняється від другої версії, за винятком маніпуляцій з DOM.

image

Dependency Injection (DI)
Або впровадження залежностей.

Однією з основних особливостей Angular версії 1.х це доступний «з коробки» DI, який з легкістю дозволяє дотримуватися принципу «розділяй і володарюй» при розробці додатків. Складні сутності реального світу при перекладі в програмний код можуть бути детерміновані і рознесені в різні модулі, представлені об'єктами, що служать на благо всієї системи. Такий підхід значно полегшує розробку і розуміння концепції самого додатка. Тим більше, такі системи дуже легко тестувати, так як не потрібно тягнути величезну ланцюжок залежностей, а лише задовольнятися єдиним модулем.

Але в даній реалізації є, звичайно, свій недолік. Пов'язано це в першу чергу з минификацией та іншими прийомами оптимізації. Так як даний DI спирається на парсинг імен залежностей, представлених рядками, це призводить до поломки при вищеназваної минификации. Звичайно, існує безліч шляхів обходу, але це все не є чистою концепцією даного фрэймфорка.

У Angular 2.0 цієї проблеми немає. Ні для кого не секрет, що новий Angular підтримує TypeScript, що практично повністю позбавляє його проблем, пов'язаних із строгою типізацією.

image

Крім цього, Angular 2.0 володіє своєю унікальною особливістю в області DI. Це так званий child injector.
Як вже говорилося, додатки на новому Angular будуть виглядати як деякі ієрархічні структури компонентів. І що б полегшити зв'язок батьківських компонентів з дочірніми, дочірні компоненти зможуть наслідувати їх залежності. Причому вже зараз є механізм, за допомогою якого відбувається налаштування даного спадкування. Можна вибирати, які залежно підуть далі, а які краще залишити тільки на цьому рівні.
Крім всього цього, залежно в новій версії фрэйворка також можуть подгружаться асинхронно.

Втім, концепція впровадження залежностей для нового Angular обширна, і про неї також можна знайти багато інформації в мережі. Варто лише сказати, що продуманість нового підходу все ближче і ближче за якістю до серверного способом організації. Як, наприклад, в .NET або Java.

Templating
Або шаблонизация в додатках.

Якщо в першій версії фрэймворка з шаблонами все ясно (ми пишемо шаблон для кожного нашого умовного «компоненти», і вони по черзі вставляє в «розетку», створюючи ілюзію безлічі сторінок), то в другій версії — це вже повноцінне одностраничное додаток. Один вхід – безліч компонентів з незалежної логікою роботи. Тому випадки, де без директиви не обійдешся у першій версії, доводиться вирішувати по-іншому у другій. Тим більше в умовах відсутності двосторонньої прив'язки даних іноді доводиться використовувати милиці і нестандартні креативні рішення.

image

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

І варто ще сказати, як вже згадувалося, що новий Angular підтримує тіньової DOM. Це відкриває нові можливості в області збільшення продуктивності, так як можна збирати готові сторінки на серверній частині, звільняючи клієнтську від роздумів.

Routing
Або маршрутизація.

Наразі даних про те, як буде виглядати в остаточному підсумку механізм маршрутизації, в новій версії Angular ще замало. Але концепція використання компонентів залишає свій відбиток. Відомо, що маршрутизація буде сильно схожа на серверний спосіб організації, який зараз, наприклад, використовує Express для node.js, a саме Router.

Можливим буде створення декількох кінцевих точок, вони ж компоненти або окремі дочірні додатки, що мають різні конфігурації маршрутизації. Зараз щось подібне можна зробити за допомогою ui-router, який у своєму арсеналі має іменовані ui-view, здатні імітувати «компоненти» в термінах нової версії Angular.

Directives, Services, Filters...
Як вже багато разів згадувалося для другої версії, компоненти – це все. Лише сервіси, перекочувавши, стали тим, чим, по суті, вони повинні були бути в першій версії. У новому Angular компоненти беруть на себе практично всі.
У підсумку виходить, що новий Angular – це той Angular, яким повинен був бути існуючий. Але чому ж перша версія вийшла іншою?

Справа в тому, що, коли Angular версії 1.х був створений, майже п'ять років тому, він не був призначений для розробників. Це був інструмент, призначений більше для проектувальників, які повинні були просто і швидко будувати статичний HTML. Протягом довгого часу це зазнавало змін. Розробники доклали багато зусиль, щоб адаптувати цей продукт до сучасних реалій, постійно оновлюючи його і покращуючи. Робили все, щоб постійно залишатися «на плаву», оскільки потреби сучасних веб-додатків постійно змінювалися. Проте всьому є обмеження, які існують за початкового нерозуміння призначення продукту. Багато цих меж стосуються проблем виконання і продуктивності. Щоб вирішити ці проблеми, необхідні нові підходи і стратегії.

P. S. Исходники проектів можна знайти на тут і тут.

P. P. S. Ну і звичайно, хотілося б конструктивної критики за цей незграбний екскурс у другій Angular. Можливо Впевнений, вже використовується більш сучасна версія фрэймворка, в додатках, які я ще не знайшов. Був би радий допомоги в цьому.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.