front end full stack evolution · ui interactive dynamic view logic database business logic native...
TRANSCRIPT
![Page 1: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/1.jpg)
Front End Full Stack Evolution
![Page 2: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/2.jpg)
Native Applications Snappy, interactive UI
Web Pages Ease of distribution
Web Applications
https://www.youtube.com/watch?v=wtURpqTgtUs&list=PLe9psSNJBf76DOOKMkDpyo_A5PfZk7JWcslides adapted from this talk by LUCA MARCHESINI at FullStackFest 2016:
![Page 3: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/3.jpg)
1990 GUI
![Page 4: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/4.jpg)
UI Interactive Dynamic
View Logic
Database
Business Logic
Native GUI Desktop
Applications
1990
![Page 5: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/5.jpg)
1992
1990
![Page 6: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/6.jpg)
UI Static
View Logic
Business Logic
Database
First Simple Web Apps
1992
![Page 7: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/7.jpg)
1992
1985
1995
![Page 8: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/8.jpg)
1995
UI Interactive
View Logic
Business Logic
html css js
Database
Web Apps with JS Enabled Interactive Features
![Page 9: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/9.jpg)
1992
1985
1995
2005
![Page 10: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/10.jpg)
UI Interactive, Dynamic
View Logic
ORM
Persistence
Business Logic
Ajax Enabled Web Apps -
Matching Simple Desktop
Apps
2005
![Page 11: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/11.jpg)
1992
1985
1995
2005
2010
Angular 1 Backbone
![Page 12: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/12.jpg)
UI Interactive, Dynamic
View Logic
REST API
ORM
Persistence
Business Logic
BackboneAngular 1
2010
Web Apps fully match
sophisticated Desktop Apps
![Page 13: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/13.jpg)
1992
1985
1995
2005
2010
2013
Angular 1 Backbone
React Angular 2 Vue Aurelia
![Page 14: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/14.jpg)
Vue
UI Interactive, Dynamic
Components
REST API
ORM
Persistence
Business Logic
React Angular 2 Aurelia
2013 Web Apps based on modular
architecture - become extensible
and reusable
![Page 15: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/15.jpg)
1992
1985
1995
2005
2010
2013
2015
Angular 1 Backbone
Redux
React Angular 2 Vue Aurelia
GraphQL
![Page 16: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/16.jpg)
UI Interactive, Dynamic
Components
Single Point API
ORM
Persistence
Business Logic
The StoreVueReact Angular 2 Aurelia
Redux
GraphQL
2015
Apps include sophisticated data model - complex analytics and data
driven UI
![Page 17: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/17.jpg)
Donation Versions
https://bitbucket.org/edeleastar/donation-web-final
https://bitbucket.org/edeleastar/donation-client
![Page 18: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/18.jpg)
donation-web
• Labs 5-11
• Tags:
• lab.XX.start
• lab.XX.end
• lab.XX.exercises
![Page 19: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/19.jpg)
donation-web
• Labs 12-15
• Tags:
• lab.XX.start
• lab.XX.end
• lab.XX.exercises
![Page 20: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/20.jpg)
donation-client
• Labs - aurelia 1-5
• Tags:
• aurelia.X.start
• aurelia.X.end
• aurelia.X.exercises
![Page 21: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/21.jpg)
UI Static
View Logic
Business Logic
ORM
Persistence
donation-web - to lab 11
MongoDB
![Page 22: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/22.jpg)
Components
View Logic
Business Logic
ORM
UI Dynamic
REST API
MongoDB Database
Final donation-web + donation-client
Aurelia
![Page 23: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/23.jpg)
UI Interactive, Dynamic
Components
Single Point API
ORM
Persistence
Business Logic
The StoreRedux
GraphQL
Aurelia
MongoDB
Future donation-web + donation-client
![Page 24: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/24.jpg)
{ "name": "donation-web", "version": "1.0.0", "description": "an application to host donations for candidates", "main": "index.js", "scripts": { "start": "node index", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "boom": "^3.2.2", "handlebars": "^4.0.5", "hapi": "^14.1.0", "hapi-auth-cookie": "^6.1.1", "hapi-auth-jwt2": "^7.0.1", "hapi-cors-headers": "^1.0.0", "inert": "^4.0.1", "joi": "^9.0.4", "jsonwebtoken": "^7.1.9", "lodash": "^4.15.0", "mongoose": "^4.5.8", "mongoose-seeder": "^1.2.1", "vision": "^4.1.0" }, "devDependencies": { "chai": "^3.5.0", "mocha": "^3.0.2", "sync-request": "^3.0.1" } }
donation-web package.json
![Page 25: Front End Full Stack Evolution · UI Interactive Dynamic View Logic Database Business Logic Native GUI Desktop Applications 1990](https://reader033.vdocuments.net/reader033/viewer/2022053005/5f0942f67e708231d425fa4e/html5/thumbnails/25.jpg)
packages
View Logic
Business Logic
ORM
REST API
Database
“handlebars""inert"
“vision" “joi"
"hapi-auth-cookie"
“hapi"
"lodash" "chai" "mocha" "sync-request"
"mongoose" "mongoose-seeder"
“boom" "hapi-auth-jwt2" “hapi-cors-headers" “jsonwebtoken"