JSFoo Submission
Download as PPTX, PDF
0 likes421 views
- The document discusses Backbone, Marionette, and Jasmine, describing them as a game changing combination. - It introduces the authors and their backgrounds in web development. - It then provides overviews of the key features and benefits of Backbone, Marionette, and Jasmine including flexible and modular code, view lifecycle management, reusable components, central messaging, and easy JavaScript testing.
JSFoo Submission
- 1. Backbone, Marionette and Jasmine: A Game Changing Combination
- 2. About Us Neha Singhal Developer at Adobe. Active in web development and UI for the past 2.5 years. Likes solving interesting problems involving UX, cross-browser issues and maintainability of code. On a personal front, an avid dancer, loves to travel and is a big fan of animated movies. Harshit Jain Developer at Adobe. Web developer for 2 years with a passion for good UI/UX. Likes solving usability and performance issues with his team. Enjoys music and playing his guitar in his free time. Loves hacking away on new libraries and frameworks, trying to figure out if he can use it for his next project.
- 4. Why Backbone? Flexible Un-opinionated Models Collections Separates data from your view Modular
- 5. Backbone : Bring it on!! Model : Handles business logic and data Collection : Array of models View : User Interface Event : Actions on UI elements Routing : Navigation to application sub-modules
- 6. What Backbone Lacks Life Cycle Management Handling Zombie Views Complex View Management Messaging Channels
- 7. We Gain With Marionette Life Cycle Management Handling Zombie Views Complex View Management Messaging Channels
- 8. View: Life In The Fast Lane INITIALIZE RENDER DESTROY ATTACH SHOW
- 9. View Management Item View Collection View Composite View Layout View ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
- 10. Item View View that represents a single item. ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
- 11. Collection View Collection of multiple item views. ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
- 12. Composite View Collection View with a template. ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
- 13. Layout View Big Daddy of all views Contains multiple regions A region can be mapped to a view module ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
- 14. Reusable Components Whaaaaaaaatt!!!! Is it really possible ??
- 15. Reusable Components Marionette by design treats all views as small, reusable entities. Views consist of A Model/A Collection A Template Accompanying styling Events Marionette conveniently bundles all these together so that they can be reused as many times as a developer wants
- 16. Reusable Components Method and procedure to achieve reusability in Marionette: Attach view to a region Thats it Seriously!!
- 18. Plug And Play Its not magic .. Ok, maybe a little
- 19. Plug And Play Marionette detaches the code for the View from the business logic Painful UI modifications will now be a thing of the past Just switch the UI template and all the underlying logic works as before
- 21. Jasmine is.. Javascript Testing Framework Independent of browsers, DOM Supports multiple javascript frameworks Headless running out of the box Easy to use Clean Syntax
- 22. So lets see what were up against Suite : to describe a section of your code Specs: it creates a new spec Expectations : what you expect the code block to do
- 23. So lets see what were up against Matchers : utility functions toEqual toMatch toBeTruthy And the list goes on and on