🌐 Public

Marionette.JS - Make your Backbone.JS Applications Dance.

By Brian Mann

Introduction

Backbone.JS developers Looking to simplify the construction of large scale JavaScript applications.

Brian Mann — I'm an expert in building large, single page applications with Backbone.js. I'm the author of ...

1 The Case For Marionette.js

Building large web applications using Backbone.js can be hard. Backbone is a great tool, but it's designed to be minimalist and useful in a wide variety of situations. As a result, you get less guidance and support from the tool as you scale up than you do from more opinionated frameworks like Angular and Ember. When a Backbone application grows,

2 JS Jabber Podcast: Marionette.js with Derick Bailey

Bandwidth provided by CacheFly. CacheFly is the world's fastest CDN, delivering rich media content up to 10x faster than traditional delivery methods. With a proven track record and over a decade's worth of experience, companies around the world choose the CacheFly CDN for reliable and unbeatable performance.

3 Connecting Data to Your Views

This is the second post in a series on Marionette.js. For more background on what Marionette is, check out the first post in the series, The Case For Marionette One of the most interesting design choices of Backbone was the decision to not provide a default render function for Views. Backbone Views by default are an empty function that adds

4 Building Complex Layouts With Marionette.js

This is the third post in a series on Marionette.js. For more background on what Marionette is, check out the first post in the series, The Case For Marionette When building complex web applications, many of the first decisions you have to make revolve around the structure and layout of your application. Most applications will have some static portions like

5 The Life of a Marionette View

This is the fourth post in a series on Marionette.js, a framework for developing apps with Backbone.js. For more background on what Marionette is, check out the series page: Marionette Explained When building Single Page Applications, it's important to manage UI components throughout their existence on the page, making sure they're properly created, attached, and destroyed. Marionette.js helps Backbone developers

Added by Brian Mann: “A quick introduction covering top notch applications using Backbone, and how stateful development is changing the web. You'll see the capabilities of client-side MVC at work, and use-cases of when to use Backbone JS.

6 BackboneRails: Episode 01 - Client Side Development

A quick introduction covering top notch applications using Backbone, and how stateful development is changing the web. You'll see the capabilities of client-side MVC at work, and use-cases of when to use Backbone JS.

Added by Brian Mann: “We'll dissect Backbone's components by building a simple feature. We'll analyze this workflow, and critically look at what Backbone does, and doesn't do for you.

7 BackboneRails: Episode 02 - Tenets of Backbone JS

We'll dissect Backbone's components by building a simple feature. We'll analyze this workflow, and critically look at what Backbone does, and doesn't do for you.

Added by Brian Mann: “By rebuilding the same Backbone feature using Marionette, we'll go into detail about what functionality Marionette offers. You'll see boilerplate removed, zombies purged, and views automated with just a few lines of code.

8 BackboneRails: Episode 03 - Marionette JS

By rebuilding the same Backbone feature using Marionette, we'll go into detail about what functionality Marionette offers. You'll see boilerplate removed, zombies purged, and views automated with just a few lines of code.

9 A deep dive into Backbone.View events

Backbone Views have a handy declarative events API. That lets you abstract your DOM event bindings into a declarative hash on your views prototype. For example After your view is created and rendered, anytime a user clicks on the p tag there will be a nice alert message in the console. How does this work though? Let's dive in and

Added by Brian Mann: “Starting up a Marionette.js App with routing can be tricky and full of gotchas. Here is a jump start guide to get you going.

10 Kicking off a Marionette.js application

Starting up a Marionette.js App with routing can be tricky and full of gotchas. Here is a jump start guide to get you going. A typical single page app requires a few pieces: Marionette provides us with all of these pieces, and all that is left for us to do is put the pieces together. First we want to create

Added by Brian Mann: “Components are critical to scaleable applications because they encourage separation of concerns. Each piece of an application, including components, should have one responsibility and not heavily depend on the other pieces.

11 Components with Backbone.js and Marionette.js

A lot of my JavaScript work involves using Backbone.js and Marionette.js for the front-end. I really like other frameworks such as Angular.js too. Despite the framework I find myself in, I immediately gravitate toward whatever modular patterns that framework facilitates. More specifically, I am interested in how I can build reusable components within the framework. Components are the objects that

Added by Brian Mann: “Marionette comes bundled with a library called Backbone.Wreqr, and in the coming months we will replace it with a new library by the name of Backbone.Radio. Radio is heavily inspired by Wreqr, but it was rewritten from the ground up.

13 Introducing Backbone.Radio

14 Building Modular Web Apps With Backbone.Radio

This is the fifth post in a series on Marionette.js. For more background on what Marionette is, check out the series page, Marionette Explained One of the great things about Backbone is how it encourages a modular approach to building UIs. Different portions of the pages are separated into individual Views, allowing you to simplify your reasoning about your code

17 JS Jabber Podcast: Marionette.js 2.0 with Sam Saccone

Bandwidth provided by CacheFly. CacheFly is the world's fastest CDN, delivering rich media content up to 10x faster than traditional delivery methods. With a proven track record and over a decade's worth of experience, companies around the world choose the CacheFly CDN for reliable and unbeatable performance.

Added by Brian Mann: “Nesting views can be a difficult task at first glance. Marionette makes your life easy with an elegant view layer that simplifies complexity and hides the implementation details. This allows you to focus on getting things done instead of reinventing the wheel.

19 Nested Views in Backbone.Marionette

Added by Brian Mann: “Beyond getting a simple walkthrough, you’ll be able to compare the app we write to the original, and see how Backbone.Marionette makes your life easier when writing Backbone apps.

20 A simple Backbone.Marionette tutorial

In this series of posts, we'll cover writing a simple Backbone.js application as a primer. You can see the live result here. The original application is at https://github.com/ddellacosta/backbone.js-examples/tree/master/collections3 and all design assets (CSS, images, etc.) are from there. This tutorial will show you how to use Derick Bailey's Backbone.Marionette to build a simple application. But beyond getting a simple walkthrough,

Added by Brian Mann: “Render an application layout, have it behave like a view in that I can send it over to one of my region manager objects, and have its own region managers that can show views within the layout.

21 Managing Layouts And Nested Views With Backbone.Marionette

I've received numerous questions about managing layouts and nested views in Backbone over the last few months. Until recently, though, I never had a great answer. Many of the applications that I've built had a lot of custom code to handle the specific needs of that application's layout and generally avoiding deeply nested views. All of that changed recently, though,

Added by Brian Mann: “Continuation of Part 1 of building apps using Backbone.Marionette.

22 A simple Backbone.Marionette tutorial (part 2)

In the previous post, we started building a simple cat leader board (see it live!) and got all the way to displaying the list of cat names. Let's finish and get to the result! Update (June 2013): I've written a book on Marionette. It guides you through developing a complete Marionette application, and will teach you how to structure your

Added by Brian Mann: “Backbone.js is quickly becoming the most popular framework for building modular client-side JavaScript applications. This is largely due to its low barrier to entry; getting started with it is super-simple. However, unlike Ember.js, Backbone, being so minimal, also leaves a lot up to the developer to figure out.

23 Application - A Thorough Introduction To Backbone.Marionette (Part 1) | Smashing Coding

To help you tap the full potential of Marionette, we've prepared an entire eBook full of useful hands-on examples which is also available in the Smashing Library. - Ed.Backbone.js is quickly becoming the most popular framework for building modular client-side JavaScript applications. This is largely due to its low barrier to entry; getting started with it is super-simple. However, unlike

Added by Brian Mann: “In the first part of this series, we discussed Backbone.Marionette’s Application. This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them.

24 Modules - A Thorough Introduction To Backbone.Marionette (Part 2) | Smashing Coding

In the first part of this series, we discussed Backbone.Marionette's Application. This time around, we'll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them. What Are Modules?Before we get into the details of how to use Marionette's module system, we

Added by Brian Mann: “In this series on Backbone.Marionette, we’ve already discussed Application and Module. This time, we’ll be taking a gander at how Marionette helps make views better in Backbone. Marionette extends the base View class from Backbone to give us more built-in functionality, to eliminate most of the boilerplate code and to convert all of the common code down to configuration.

25 A Thorough Introduction To Backbone.Marionette (Part 3) - Smashing Magazine

To help you tap the full potential of Marionette, we've prepared an entire eBook full of useful hands-on examples which is also available in the Smashing Library. - Ed.In this series on Backbone.Marionette, we've already discussed Application and Module. This time, we'll be taking a gander at how Marionette helps make views better in Backbone. Marionette extends the base View

Added by Brian Mann: “A brief Introduction to Backbone.Marionette. It takes a lot of the most common use cases of Backbone and hides that work for you, making your job much easier.

26 Backbone.Marionette

Added by Brian Mann: “Dialogs are a popular plugin and commonly found in most applications. In this screencast we'll go through integrating a jQuery UI dialog into our application. You'll see how to create a custom region object to serve as a specialized dialog, allowing your views to easily pass configuration options to the dialog. I'll also cover how to trigger events which control how the dialog behaves.

27 BackboneRails: Screencast 01 - Dialogs and Custom Regions

Dialogs are a popular plugin and commonly found in most applications. In this screencast we'll go through integrating a jQuery UI dialog into our application. You'll see how to create a custom region object to serve as a specialized dialog, allowing your views to easily pass configuration options to the dialog.

Added by Brian Mann: “To help visualize the difference (and similarity) of layouts, regions, composites, collections, and item views, I’ve created helpful diagrams to visually demonstrate how the pieces of the puzzle fit together.

28 A Visual Guide to Marionette.js Views

When I first began working on the front-end to this one interactive application, I decided to just write a few lines of JavaScript to handle some miscellaneous things behaviors on the front-end. However, that soon turned into a completely interactive front-end with thousands of lines of JavaScript trying to hack together the entire DOM. Luckily, Backbone.js came to the rescue

Added by Brian Mann: “We’ll cover more advanced topics here, such as Backbone.History, modal windows, organizing code into sub applications, and more.

29 Tutorial: a full Backbone.Marionette application (part 1)

In previous posts, I introduced you to Backbone.Marionette which provides many niceties to help you build complex Backbone.js apps. We'll cover more advanced topics here, such as Backbone.History, modal windows, organizing code into sub applications, and more. The resulting app can bee seen live here. Let's get started! Update (June 2013): I've written a book on Marionette. It guides you

Added by Brian Mann: “In the previous post, we started writing our application (see it live!) and now have a functional app, even if it still is somewhat basic.

30 Tutorial: a full Backbone.Marionette application (part 2)

In the previous post, we started writing our application (see it live!) and now have a functional app, even if it still is somewhat basic. Update (June, 2013): I've written a book on Marionette. It guides you through developing a complete Marionette application, and will teach you how to structure your code so large apps remain manageable. Also, since this

Added by Brian Mann: “Loading views are a great way to provide instant feedback to user's when their page is loading. In some circumstances, they become a necessary building block in the development of your application. How do you display this page while your app is fetching resources from the server? What if your application logic is still processing data that this page needs to display? In this screencast, we'll build a fully functioning loading component using Backbone.js and Marionette.js. We'll answer how to handle old views when new views are requested. We'll also look at some common pitfalls that can cause memory leaks when handling view logic. Lastly we'll experiment with different kinds of loading effects and transitions.

32 BackboneRails: Screencast 02 - Loading Views

Vimeo is the home for high-quality videos and the people who love them.

Added by Brian Mann: “The functionality we’ll implement using promises will be a “loading” view indicating the user data is being loaded. Once the app has fetched the remote data, the loading view will be replaced by the appropriate views.

33 Using jQuery promises to render Backbone views after fetching data

So I've been working through Brian Mann's Marionette screencasts at Backbonerails.com. They're absolutely top notch material, and I can't recommend them enough. So if you want to learn how to go about building large Backbone applications (even if the back end won't be rails), check them out! In episode 6, Brian goes over several strategies for fetching remote data and

Khang H. Nguyen-Le

Freshman

  • 0 Playlists
  • 0 Followers

周振肖

Freshman

  • 2 Playlists
  • 0 Followers

Marwen Arfa

Freshman

  • 0 Playlists
  • 0 Followers

Jonathan Dupré

Freshman

  • 0 Playlists
  • 0 Followers

Chris Boon

Freshman

  • 0 Playlists
  • 0 Followers

Alex Kataev

Freshman

  • 0 Playlists
  • 0 Followers

Said Bensamdi

Freshman

  • 0 Playlists
  • 0 Followers

Ting Yuen

Freshman

  • 0 Playlists
  • 0 Followers

arbuscula

Freshman

  • 1 Playlists
  • 1 Followers

Greg Egan

Freshman

  • 0 Playlists
  • 0 Followers

sherif.hafiz

Freshman

  • 0 Playlists
  • 0 Followers

Kartik Shah

Freshman

  • 0 Playlists
  • 0 Followers

Marius Iordache

Freshman

  • 0 Playlists
  • 0 Followers

iabok

Freshman

  • 0 Playlists
  • 0 Followers

Robin Ting

Freshman

  • 0 Playlists
  • 0 Followers

kyc

http://t.co/24uWBzXV

  • 0 Playlists
  • 0 Followers

Christopher Riding

Design, Research & Development

  • 0 Playlists
  • 0 Followers

László Kohári

Freshman

  • 0 Playlists
  • 0 Followers

Błażej Pędzik

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?