Click to edit Master subtitle style Full stack. SPA development

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

Full stacks

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 OFFICES EUROPE OFFICES

Austin, TXFort Myers, FLLehi, UTNewport Beach, CAWaltham, MA

BulgariaGermanyNetherlandsPolandRussia

SwedenUkraineUnited Kingdom

Thank you!

US OFFICES EUROPE OFFICES

Austin, TXFort Myers, FLLehi, UTNewport Beach, CAWaltham, MA

BulgariaGermanyNetherlandsPolandRussia

SwedenUkraineUnited Kingdom