Click to edit Master subtitle style Full stack. SPA development

2 About me Roman Feniak Senior Software Engineer > 4,5 years of experience JS: AngularJS, Backbone & Marionette PHP: Laravel, Symphony, Codeigniter, Zend, Yii

3 Agenda Who are full stacks? What is SPA? How to build modern SPA?

Full stacks 4

5 Who are they? Why it’s became popular? What is based to know?

6 Single page application What is SPA? SPA VS MVC Summary

7 REST principles

8 HTTP Status Codes

SPA Development 9

10 Starting from scratch: backend

11 Starting from scratch: frontend AngularJS Bootstrap Browserify NPM Gulp SASS

12 Angular Fast Development Two-way data binding Dependency injection Multi modular approach Directives No DOM manipulation Testability Huge amount of plug-ins Community Rump-up period No migration to Angular 2.0 Bindings limit Search engines Directives - hard to learn

13 NPM package.json console

14 Angular: Without Browserify Index.html

15 Angular: With Browserify usersListCtrl.s app.users.js app.js Index.html

16 Gulp & Browserify

17 Multi modular architecture & app.js app.js

18 Angular: Core module app.core.js

19 Angular: Single Module app.users.js

20 UI Router – base settings index.html config.js of core module

21 Module routing app.users.js

22 Angular Bootstrap UI Allows to use all power of Bootstrap via directives No need to work with Bootstrap directly via jQuery Support of : Accordions, Alerts, Buttons, Carousels, Collapse, Datepickers, Dropdowns, Modals, Pagination, Popovers, Progressbards, Tabs, Timepickers and Tooltips

23 SASS

24 Finally: Gulp & SASS

25 Summary Who are Fullstacks SPA rocks Angular, must have plug-ins and tools

Questions? US OFFICESEUROPE OFFICES Austin, TX Fort Myers, FL Lehi, UT Newport Beach, CA Waltham, MA Bulgaria Germany Netherlands Poland Russia Sweden Ukraine United Kingdom

Thank you! US OFFICESEUROPE OFFICES Austin, TX Fort Myers, FL Lehi, UT Newport Beach, CA Waltham, MA Bulgaria Germany Netherlands Poland Russia Sweden Ukraine United Kingdom