Writing SPA in 2017
-
Upload
arek-flinik -
Category
Technology
-
view
222 -
download
1
Transcript of Writing SPA in 2017
![Page 1: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/1.jpg)
Building SPA in 2017
Arek Flinik @aflinik
wroc_love.rb 2015
![Page 2: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/2.jpg)
How many of you don't work on SPA?
![Page 3: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/3.jpg)
So why do we still talk about cells rendering HTML
from our apps so much?
![Page 4: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/4.jpg)
Typical 2015 SPA
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
![Page 5: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/5.jpg)
Typical 2015 SPA
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
BOILERPLATE
![Page 6: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/6.jpg)
Typical 2015 SPA
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
BOILERPLATE Overly coupled
![Page 7: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/7.jpg)
Example
Andrzej
what if we want to add new information here?
![Page 8: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/8.jpg)
Andrzej
Example
314 posts
what if we want to add new information here?
![Page 9: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/9.jpg)
Example
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
![Page 10: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/10.jpg)
Example
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
![Page 11: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/11.jpg)
Solution?
One app for everything!
![Page 12: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/12.jpg)
Solution?
One app for everything!Yeeeaaah, but...
![Page 13: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/13.jpg)
Better solution?
HASKELL ;-)
![Page 14: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/14.jpg)
Better solution?
Falcorfrom
Relayfrom
![Page 15: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/15.jpg)
Better solution?
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
![Page 16: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/16.jpg)
Better solution?
DB
Data (Model / Repo / Etc)Controller
Response formatting
AJAXModel / Store
Controller / Glue / Dispatcher
View / Component / Template
Routes
BOILERPLATE Overly coupled
🚫
![Page 17: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/17.jpg)
Better solution?
DB
Data (Model / Repo / Etc)
Relay / Falcor
View / Component / Template
GraphQL / ???
![Page 18: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/18.jpg)
Want to try it?
![Page 19: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/19.jpg)
It's not 2017 yet 😒
![Page 20: Writing SPA in 2017](https://reader034.fdocuments.us/reader034/viewer/2022042701/55a5252e1a28abd40e8b462d/html5/thumbnails/20.jpg)
Thanks 👌