Intermediate
28h
Introduction to Marionette.js – The Backbone Framework
Delve into Marionette.js for building JavaScript applications. Gain insights into class objects, views, templates, event handling, collections, routing, and web storage for interactive client-server development.
Marionette is an extension of Backbone that is very popular in building various JavaScript applications with a client-server system. It introduces a method for creating applications where you can define a class object that handles the entire application and acts as its root.
You’ll learn the differences between views and templates. Next, you will cover displaying a model with a default value and use events to generate alerts. Then you’ll cover collectionView and CompositeView, to list contacts and display the column headers on the application’s main page, respectively. You will also learn to add routing to an application for quick navigation and implement web storage persistence. Then, you will learn how to add navigation and highlight menu items on the application’s main page.
This course will help you build highly interactive JavaScript applications as a web developer. It will further empower you to develop your applications by understanding Marionette.
Marionette is an extension of Backbone that is very popular in building various JavaScript applications with a client-server sys...Show More
WHAT YOU'LL LEARN
An understanding of Marionette and its application to build a contact management application
Familiarity with the difference between views and templates in Marionette
Hands-on experience in displaying the collection on the application's main page by using CompositeView
Hands-on experience using CollectionView, to list our collection and apply sorting by using the comparator option
Hands-on experience in adding routing to an application for quick navigation using Marionette
The ability to add web storage persistence to retain the data modified by the user using Marionette
Working knowledge of adding several buttons, adding events, bubbling, triggers, and animations in Marionette
An understanding of Marionette and its application to build a contact management application
Show more
TAKEAWAY SKILLS
Content
1.
Introduction
3 Lessons
Get familiar with Marionette.js to build interactive, well-structured client-server applications.
2.
Displaying a Static View
3 Lessons
Unpack the core of creating static views, dynamic templates, and modifying the DOM in Marionette.js.
3.
Displaying a Model
4 Lessons
Work your way through displaying and managing model content for dynamic web applications.
4.
Displaying a Collection of Models
6 Lessons
Apply your skills to manage and display collections of models using Marionette.js.
5.
Structuring Code with Modules
7 Lessons
Refactor your application by structuring and organizing code into modular sub-applications.
6.
Creating Tables in Views
6 Lessons
Tackle creating and managing CompositeViews in Marionette.js, focusing on tables, events, and practical exercises.
7.
Events, Bubbling, and TriggerMethod
6 Lessons
Practice using events, bubbling, and TriggerMethod for efficient interaction management in Marionette.js.
8.
Displaying Contacts in Dedicated Views
2 Lessons
Try out displaying contacts in dedicated views with event handling and sub-modules.
9.
Implementing Routing
9 Lessons
Get started with implementing routing in Marionette.js for efficient user navigation and state management.
10.
Dealing with Persisted Data
4 Lessons
Examine adding local storage, loading and deleting contacts in Marionette.js.
11.
Handling Data Latency
7 Lessons
Break down the steps to handle data latency in Marionette.js applications effectively.
12.
Managing Forms
4 Lessons
Take a closer look at managing forms, editing contacts, saving modifications, and validating data in Marionette.js.
13.
Displaying a Modal Window
3 Lessons
Implement modal functionality, views, and form data handling for efficient contact editing.
14.
Complex Views and Base Views
5 Lessons
Build on managing complex views, enhancing user experience, and maintaining organized code.
15.
Managing Dialogs with a Dedicated Region
2 Lessons
Step through managing modal dialogs with a dedicated region in Marionette.js.
16.
Filtering Contacts
5 Lessons
Get started with filtering contacts, using collections, empty views, and optional routes.
17.
Addition to Sub-Application
7 Lessons
Work your way through adding sub-applications, setting models, templates, views, and navigation.
18.
Conclusion
2 Lessons
Apply your skills to create and manage dynamic web applications with Marionette.js.
19.
Appendix: Using Web Storage for Persistence
5 Lessons
Map out the steps for using web storage for data persistence in Marionette.js.
20.
Appendix: Creating a FilteredCollection
2 Lessons
Tackle creating and managing FilteredCollections in Marionette.js for efficient data handling.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Developed by MAANG Engineers
Trusted by 2.8 million developers working at companies
"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"
Anthony Walker
@_webarchitect_
"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"
Evan Dunbar
ML Engineer
"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."
Software Developer
Carlos Matias La Borde
"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"
Souvik Kundu
Front-end Developer
"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."
Vinay Krishnaiah
Software Developer
Hands-on Learning Powered by AI
See how Educative uses AI to make your learning more immersive than ever before.
AI Prompt
Code Feedback
Explain with AI
AI Code Mentor
Free Resources
