javascript architectures
DESCRIPTION
TRANSCRIPT
![Page 1: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/1.jpg)
Thematic Seminar By JS & JS
Grokking Architecture.js
![Page 2: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/2.jpg)
Hello! Start By a Refresher of What We’ve Learned…
![Page 3: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/3.jpg)
MVC MVVM
MVP
MV*
![Page 4: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/4.jpg)
Which MVC? So many variants!
![Page 5: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/5.jpg)
Design Patterns were supposed to be common vocabulary.
But everyone has their own
definitions
“
![Page 6: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/6.jpg)
Model View Controller
![Page 7: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/7.jpg)
Model View Presenter
![Page 8: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/8.jpg)
Model View ViewModel
![Page 9: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/9.jpg)
Model View *
![Page 10: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/10.jpg)
How Does This Look Like In JavaScript?
![Page 11: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/11.jpg)
Code
How is data represented?
![Page 12: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/12.jpg)
Code
What does the user need to see?
Are they repeated output?
![Page 13: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/13.jpg)
Code
What are the user interactions that need
handling?
![Page 14: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/14.jpg)
![Page 15: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/15.jpg)
How Do They Help You?
![Page 16: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/16.jpg)
Separation of Concerns
![Page 17: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/17.jpg)
Allows Templating
![Page 18: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/18.jpg)
Centralized View Routing
![Page 19: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/19.jpg)
Better Handling of Data
![Page 20: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/20.jpg)
Intro to Backbone.js A Talk for the Not So Smart Masses…by a not so smart mass
![Page 21: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/21.jpg)
From This…
![Page 22: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/22.jpg)
To This…
![Page 23: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/23.jpg)
What exactly is Backbone.js?
![Page 24: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/24.jpg)
Meet the Man Behind Backbone.js
![Page 25: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/25.jpg)
Neither a MVC Nor a MVP Framework Then what is it?
![Page 26: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/26.jpg)
Backbone doesn't fit either MVC nor MVP perfectly. Instead, it borrows some of the best concepts from multiple architectural patterns and creates a flexible framework that just works well.
“
Addy Osmani, Google Engineer, Author of Developing Backbone.js Applications
![Page 27: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/27.jpg)
Why Backbone.js? And not <insert your fav js framework here>.js?
![Page 28: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/28.jpg)
Awesome Documentation
![Page 29: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/29.jpg)
Template Framework Agnostic
![Page 30: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/30.jpg)
{{ mustache }}
![Page 31: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/31.jpg)
Used by them…
![Page 32: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/32.jpg)
How does it look like?
![Page 33: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/33.jpg)
Folder Structure
![Page 34: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/34.jpg)
![Page 35: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/35.jpg)
Backbone.js Models
![Page 36: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/36.jpg)
![Page 37: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/37.jpg)
![Page 38: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/38.jpg)
Backbone.js Views
![Page 39: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/39.jpg)
![Page 40: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/40.jpg)
![Page 41: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/41.jpg)
Backbone.js Templates
![Page 42: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/42.jpg)
![Page 43: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/43.jpg)
Backbone.js Routers
![Page 44: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/44.jpg)
![Page 45: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/45.jpg)
Try It!
![Page 46: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/46.jpg)
![Page 47: JavaScript Architectures](https://reader034.vdocuments.us/reader034/viewer/2022051514/54b7b77a4a7959bf688b4745/html5/thumbnails/47.jpg)
Questions? This two not so smart mass will try their best to answer.