HomeCoursesIntroduction to Marionette.js – The Backbone Framework

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.

Join 2.8M developers at

Overview

Content

Reviews

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

TAKEAWAY SKILLS

JavaScript

React.js

Interactive Real-time Web Applications

Content

92 Lessons16 Quizzes

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 a Collection of Models

6 Lessons

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

Structuring Code with Modules

7 Lessons

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

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.

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Developed by MAANG Engineers

Every Educative lesson is designed by a team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

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.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

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!

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.

5 h

beginner

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.

22 h 10 m

beginner

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.

5 h 30 m

beginner

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.

6 h

beginner

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.

6 h

beginner

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.

12 h

beginner

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