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

This course includes

90 Playgrounds

16 Quizzes

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

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

What You'll Learn

An understanding of Marionette and its application to build a contact management application

Course Content

Introduction

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

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

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

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

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.

Events, Bubbling, and TriggerMethod

6 Lessons

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

Displaying Contacts in Dedicated Views

2 Lessons

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

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.

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

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!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath