Introduction to Marionette.js – The Backbone Framework

Intermediate

92 Lessons

28h

Certificate of Completion

AI-POWERED

Explanations

This course includes

90 Playgrounds

16 Quizzes

114 Illustrations

This course includes

90 Playgrounds

16 Quizzes

114 Illustrations

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

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

COURSE AUTHOR

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

Recommended Courses

BEFORE STARTING THIS COURSE

AFTER FINISHING THIS COURSE

FOR TEAMS

Interested in this course for your business or team?

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