Introduction to Marionette.js – The Backbone Framework

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

What is Marionette.js?

Running the Application Asset Organization

Displaying a Static View

Static Views Dynamically Specifying a View Template Modifying the DOM Structure

Displaying a Model

Displaying Content from a Model Model Defaults and Events Exercise: Model Defaults and Events Solution: Model Defaults and Events

Displaying a Collection of Models

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

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

Events, Bubbling, and TriggerMethod

6 Lessons

Displaying Contacts in Dedicated Views

2 Lessons

Implementing Routing

9 Lessons

Dealing with Persisted Data

4 Lessons

Handling Data Latency

7 Lessons

Managing Forms

4 Lessons

Displaying a Modal Window

3 Lessons

Complex Views and Base Views

5 Lessons

Managing Dialogs with a Dedicated Region

2 Lessons

Filtering Contacts

5 Lessons

Addition to Sub-Application

7 Lessons

Conclusion

2 Lessons

Appendix: Using Web Storage for Persistence

5 Lessons

Appendix: Creating a FilteredCollection

2 Lessons

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

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