Home>Courses>Introduction to Marionette.js – The Backbone Framework

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.

Intermediate

92 Lessons

28h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

90 Playgrounds

16 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

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...Show More

Marionette is an extension of Backbone that is very popular in building various JavaScript applications with a client-server sys...Show More

TAKEAWAY SKILLS

JavaScript

React.js

Interactive Real-time Web Applications

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

Course Content

Introduction

3 Lessons

Get familiar with Marionette.js to build interactive, well-structured client-server applications.

What is Marionette.js?

Running the Application

Asset Organization

Displaying a Static View

3 Lessons

Unpack the core of creating static views, dynamic templates, and modifying the DOM in Marionette.js.

Static Views

Dynamically Specifying a View Template

Modifying the DOM Structure

Displaying a Model

4 Lessons

Work your way through displaying and managing model content for dynamic web applications.

Displaying Content from a Model

Model Defaults and Events

Exercise: Model Defaults and Events

Solution: Model Defaults and Events

Displaying a Collection of Models

6 Lessons

Apply your skills to manage and display collections of models using Marionette.js.

Introducing the CollectionView

Listing our Contacts with a CollectionView

Sorting a Collection

Exercise: Sorting a Collection

Solution: Sorting a Collection

Quiz: Collection of Models

Structuring Code with Modules

7 Lessons

Refactor your application by structuring and organizing code into modular sub-applications.

Starting with Modules

Defining Modules

Moving Contacts to the Entities Module

Creating a Module for the ContactsApp Sub-Application

Moving the App Initialization Handler

Exercise: Declaring a Template Sub-Module

Solution: Declaring a Template Sub-Module

Creating Tables in Views

6 Lessons

Tackle creating and managing CompositeViews in Marionette.js, focusing on tables, events, and practical exercises.

Building a CompositeView

Exercise: Building a CompositeView

Solution: Building a CompositeView

Events in CompositeView

Exercise: Events in CompositeView

Solution: Events in CompositeView

Events, Bubbling, and TriggerMethod

6 Lessons

Practice using events, bubbling, and TriggerMethod for efficient interaction management in Marionette.js.

Deleting a Contact

Communicating via Events

Adding Animation

Exercise: Events and Bubbling

Solution: Events and Bubbling

Quiz: Events, Bubbling, and Trigger Method

Displaying Contacts in Dedicated Views

2 Lessons

Try out displaying contacts in dedicated views with event handling and sub-modules.

Wiring up the Show Event

The ContactsApp.Show Sub-Module

Implementing Routing

9 Lessons

Get started with implementing routing in Marionette.js for efficient user navigation and state management.

How to Think About Routing

Adding a Router to ContactsApp

Routing Helpers

DRYing up Routing with Events

Adding a Show Route

Managing Routing Issues for Nonexistent Contacts

Exercise: Implementing Routing

Solution: Implementing Routing

Quiz: Implementing Routing

10.

Dealing with Persisted Data

4 Lessons

Examine adding local storage, loading and deleting contacts in Marionette.js.

Adding Local Storage and a Location to Our Entities

Loading Contacts

Deleting a Contact

Quiz: Dealing with Persisted Data

11.

Handling Data Latency

7 Lessons

Break down the steps to handle data latency in Marionette.js applications effectively.

Delaying our Contact Fetch

Add Deferreds

Add a Loading View

Exercise: Displaying a Loading View

Solution: Displaying a Loading View

Passing Parameters to Views and SerializeData

Quiz: Handling Data Latency

12.

Managing Forms

4 Lessons

Take a closer look at managing forms, editing contacts, saving modifications, and validating data in Marionette.js.

Editing a Contact

Edit Button

Saving the Modified Contact

Validating Data

13.

Displaying a Modal Window

3 Lessons

Implement modal functionality, views, and form data handling for efficient contact editing.

Implementing Modal View

Implementing the Modal Functionality

Handling the Modal Form Data

14.

Complex Views and Base Views

5 Lessons

Build on managing complex views, enhancing user experience, and maintaining organized code.

Subdividing Complex Views with Layouts

Extending from Base Views

Positioning the Newly Added Contact

Some Cleanup

Quiz: Complex Views and Base Views

15.

Managing Dialogs with a Dedicated Region

2 Lessons

Step through managing modal dialogs with a dedicated region in Marionette.js.

Cleaning Up Our Modal Dialog Code

Customizing onRender

16.

Filtering Contacts

5 Lessons

Get started with filtering contacts, using collections, empty views, and optional routes.

Adding Filtering Contacts to our Application

Using Filtered Collection

Implementing an Empty View

Optional Routes and Query Strings

Quiz: Filtering Contacts

17.

Addition to Sub-Application

7 Lessons

Work your way through adding sub-applications, setting models, templates, views, and navigation.

The About Sub-Application

Setting Up the Models

Adding Templates and Views

Implementing the Controller and Sub-Application

Navigating with the Brand

Highlighting the Active Header

Handling Menu Clicks

18.

Conclusion

2 Lessons

Apply your skills to create and manage dynamic web applications with Marionette.js.

Contact Manager Application

Closing Thoughts

19.

Appendix: Using Web Storage for Persistence

5 Lessons

Map out the steps for using web storage for data persistence in Marionette.js.

Implementation Strategy

Proxying the Constructor

Using a Mixin with Underscore

Determining the Storage Key

Calling the Constructor with the Apply Function

20.

Appendix: Creating a FilteredCollection

2 Lessons

Tackle creating and managing FilteredCollections in Marionette.js for efficient data handling.

Creating a New File for Collection

Managing Cases

Trusted by 2.6 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

The Complete Guide to Modern JavaScript

Gain insights into JavaScript from basics to ES2021, delve into TypeScript essentials, and test your knowledge through quizzes and coding challenges to reinforce learning.

beginner

6 hours

Course

The Complete Guide to jQuery

Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

beginner

6 hours

Course

JavaScript in Detail: From Beginner to Advanced

Discover JavaScript fundamentals and advanced concepts, including OOP and asynchronous programming. Gain insights through projects and a final exam, enhancing your skills and portfolio.

beginner

12 hours

Course

The Complete Guide to Modern JavaScript

beginner

6 hour

Course

The Complete Guide to jQuery

beginner

6 hour

Course

JavaScript in Detail: From Beginner to Advanced

beginner

12 hour

Related Courses and Skill Paths

Course

Web Development: A Primer

Delve into web development fundamentals, exploring HTML, CSS, JavaScript, and version control. Gain insights into essential web technologies to confidently pursue further learning and projects.

beginner

5 hours

Course

Building Front-End Web Applications with Plain JavaScript

Delve into building front-end web applications with plain JavaScript. Learn by doing, improving your skills through examples, and grasp best practices while creating functional, self-understood projects.

beginner

22 hours 10 mins

Course

Docker for Web Developers

Gain insights into Docker's architecture, images, and containers. Learn about running databases, using WordPress and Node.js with Docker, and confidently apply Docker in web development projects.

beginner

5 hours 30 mins

Course

Web Development: A Primer

beginner

5 hour

Course

Building Front-End Web Applications with Plain JavaScript

beginner

22 hour 10 min

Course

Docker for Web Developers