Презентація до дипломної роботина тему:

«Архітектура, технології та інструменти розробкисучасних односторінкових (SPA) ВЕБ-додатків»

Виконав: Воронін І.Б.

Керівник: Романов В.В.

Київ 2016

Актуальність

Інтерес до SPA фреймворкам на основі пошукових запитів

*за даними Google Trends

Існуючі односторінкові веб-додаткиGmail

Існуючі односторінкові веб-додаткиGoogle Maps

Існуючі односторінкові веб-додаткиExcel Online

Існуючі односторінкові веб-додаткиWord Online

Життєвий цикл традиційноговеб-сайту

Клієнт

Перезава

нтаження

сторінки

Сервер

Перший запит

HTML сторінка як відповідь

Відправлення данних форми

HTML сторінка як відповідь

Життєвий цикл односторінкового додатку

Клієнт Сервер

Перший запит

HTML сторінка як відповідь

AJAX запит

JSON відповідь

Багатоплатформність

Простота розробки

Чуйність інтерфейсу

Багатоплатформність

011011010

100110110

110101001

+ Переваги Чудова чуйність

інтерфейсу

Доступ до обладнання та

можливостей платформи

Продуктивність нативного

коду

Займає місце на

ПЗП

Потребує

інсталяції

Підвищене

навантаження на клієнт

Необхідність інтернет

з’єднання

Необхідність у сервері

Необхідність

постійного інтернет

з’єднання

Необхідність у

продуктивному

сервері - Недоліки

Розглянуті фреймворки

Порівняння можливостей фреймворків

Backbone Ember Knockout Angular 2

Перший випуск 2010 2011 2015 В разробці

Ліцензія MIT MIT MIT MIT

Основной шаблон MVP MVC MVVM MVC

Зв’язування

Шаблони (прототипування)

Клієнтська маршрутизація

Інверсія керування

Відкритий сирцевий код

Компоненти та навігація прикладу

Архітектура та зв’язок компонентів Angular 2 додатку

Директива

{ }

МетаданіМодульСервіс

{ }

Зв’язування

властивостейЗв’язування

подій

Шаблон

< >

Компонент

{ }

Метадані

МодульДанні

3.1415

МодульФункція

λ

МодульКомпонент

{ }

Інжектор

Сервіс

{ }

Батьківський

Шаблон

Дочірній

Компонент

{ }<

>

>

>

Зв’язування

подій

Зв’язування

властивостей

Батьківський

Компонент

{ }

Ієрархія компонентів додатку

Кореневий

Шаблон

< >

Кореневий

Компонент

{ }

Дочірній

Шаблон

< >

Дочірній

Компонент

{ }

Дочірній

Шаблон

< >

Дочірній

Компонент

{ }

Дочірній

Шаблон

< >

Дочірній

Компонент

{ }

Модель бази даних додатку MyLittleEnterprise

Графічний інтерфейс додатку MyLittleEnterprise

Висновки:

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

Дякую за увагу!