Презентация к дипломной работе на...
TRANSCRIPT
![Page 1: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/1.jpg)
Презентація до дипломної роботина тему:
«Архітектура, технології та інструменти розробкисучасних односторінкових (SPA) ВЕБ-додатків»
Виконав: Воронін І.Б.
Керівник: Романов В.В.
Київ 2016
![Page 2: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/2.jpg)
Актуальність
Інтерес до SPA фреймворкам на основі пошукових запитів
*за даними Google Trends
![Page 3: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/3.jpg)
Існуючі односторінкові веб-додаткиGmail
![Page 4: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/4.jpg)
Існуючі односторінкові веб-додаткиGoogle Maps
![Page 5: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/5.jpg)
Існуючі односторінкові веб-додаткиExcel Online
![Page 6: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/6.jpg)
Існуючі односторінкові веб-додаткиWord Online
![Page 7: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/7.jpg)
Життєвий цикл традиційноговеб-сайту
Клієнт
Перезава
нтаження
сторінки
Сервер
Перший запит
HTML сторінка як відповідь
Відправлення данних форми
HTML сторінка як відповідь
![Page 8: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/8.jpg)
Життєвий цикл односторінкового додатку
Клієнт Сервер
Перший запит
HTML сторінка як відповідь
AJAX запит
JSON відповідь
![Page 9: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/9.jpg)
Багатоплатформність
Простота розробки
Чуйність інтерфейсу
Багатоплатформність
011011010
100110110
110101001
+ Переваги Чудова чуйність
інтерфейсу
Доступ до обладнання та
можливостей платформи
Продуктивність нативного
коду
Займає місце на
ПЗП
Потребує
інсталяції
Підвищене
навантаження на клієнт
Необхідність інтернет
з’єднання
Необхідність у сервері
Необхідність
постійного інтернет
з’єднання
Необхідність у
продуктивному
сервері - Недоліки
![Page 10: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/10.jpg)
Розглянуті фреймворки
![Page 11: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/11.jpg)
Порівняння можливостей фреймворків
Backbone Ember Knockout Angular 2
Перший випуск 2010 2011 2015 В разробці
Ліцензія MIT MIT MIT MIT
Основной шаблон MVP MVC MVVM MVC
Зв’язування
Шаблони (прототипування)
Клієнтська маршрутизація
Інверсія керування
Відкритий сирцевий код
![Page 12: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/12.jpg)
Компоненти та навігація прикладу
![Page 13: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/13.jpg)
Архітектура та зв’язок компонентів Angular 2 додатку
Директива
{ }
МетаданіМодульСервіс
{ }
Зв’язування
властивостейЗв’язування
подій
Шаблон
< >
Компонент
{ }
Метадані
МодульДанні
3.1415
МодульФункція
λ
МодульКомпонент
{ }
Інжектор
Сервіс
{ }
Батьківський
Шаблон
Дочірній
Компонент
{ }<
>
>
>
Зв’язування
подій
Зв’язування
властивостей
Батьківський
Компонент
{ }
![Page 14: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/14.jpg)
Ієрархія компонентів додатку
Кореневий
Шаблон
< >
Кореневий
Компонент
{ }
Дочірній
Шаблон
< >
Дочірній
Компонент
{ }
Дочірній
Шаблон
< >
Дочірній
Компонент
{ }
Дочірній
Шаблон
< >
Дочірній
Компонент
{ }
![Page 15: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/15.jpg)
Модель бази даних додатку MyLittleEnterprise
![Page 16: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/16.jpg)
Графічний інтерфейс додатку MyLittleEnterprise
![Page 17: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/17.jpg)
Висновки:
Можна зробити висновок, що Angular 2 –перспективний фреймворк, використання якогодозволяє зручно та швидко розробляти складніодносторінкові веб-додатки що легко підтримуватита масштабувати. Завдяки таким фреймворкам,кількість яких значно зросла останнім часом,концепція SPA швидко набуває популярності й маєвсі шанси стати провідною у майбутньому.
![Page 18: Презентация к дипломной работе на тему:cad.kpi.ua/attachments/093_2016p_Voronin.pdfПрезентация к дипломной работе на тему:](https://reader036.vdocuments.site/reader036/viewer/2022081517/5fe0b770e04a3b650b471aca/html5/thumbnails/18.jpg)
Дякую за увагу!