"I love Chaplin | HTML5 application architecture"

2022-05-04 02:40:43

Chaplin About Documentation Examples Support Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices.Chaplin empowers you to quickly develop scalable single-page web applications; allowing you to focus on designing and developing the underlying functionality in your web application. Download chaplin.js or install with package managers: bower install --save chaplin component install chaplinjs/downloads Minified (12K gzip) Boilerplates Brunch with Chaplin Uses Brunch as builder which allows ultra-simple workflow. It incorporates H5BP and CoffeeScript / stylus / handlebars. For those preferring plain JS, there is also a Plain JavaScript variant Chaplin boilerplate Simple “Hello world” example project using Chaplin and Require.js Chaplin boilerplate js Plain JS variant of the previous boilerplate Rails boilerplate With Backbone, Chaplin and Require.js Why Chaplin More than Backbone Backbone is very good at what it does (simple MVC library), but a library alone is not enough for building single-page apps. For example, there is no good memory management solution in Backbone. Chaplin addresses these limitations by providing a lightweight but flexible structure which leverages well-proven design patterns and best practises. Super scalable Chaplin allows you to focus on designing and developing the underlying functionality in your web application. You can quickly make a prototype and then use it as a starting point and make really big web app in little time. Less to learn Using Exoskeleton as a Backbone drop-in replacement and your stack size will be just 20K, while stuff like Ember is over 60K Even if you add Underscore and jQuery to this stack, overall size will still be just 52K. Clean architecture Chaplin allows you to achieve these goals: No global variables: forgot about horrible global shared mutable namespaces a-la App.Views.Signup.ContinueStep. Using any module system (Common.js, AMD or ES6) is required for Chaplin. Loose coupling: by default, you can’t access chaplin internals inside your app. Events and messages are used in communication of components. Well-structuredMaking REST web apps is extemely easy with Chaplin.Here’s example app. When you click on app link, it tries to load GitHub user data and display it. It was separated to 11 files so that you can see each chunk separately. Each file is a module and loaded from other file (with Brunch). (non-iframe link), (GitHub repo) initialize routes controllers/users-controller models/user views/base/view views/site-view views/templates/site views/random-users-view views/templates/random-users views/user-view views/templates/userFeatures Better support for CoffeeScript class hierarchies as well as object composition Better support for inheritance: automatic merging of declaratively bound events (and some other props) from the whole prototype chain. Strict memory management and object disposal Optional Underscore and jQuery using Exoskeleton Module encapsulation and lazy-loading using AMD / common.js modules Cross-module communication using the Mediator and Publish/Subscribe patterns Controllers for managing individual UI views Rails-style routes which map URLs to controller actions URL reversals which allow to dynamically construct app URLs A route dispatcher and a top-level view manager Extended model, view and collection classes to avoid repetition and enforce conventions A collection view for easy and intelligent list renderingDependenciesChaplin supports AMD and Common.js modules. There is no “global variables” build, so Chaplin explicitly prohibits any using without module systems.Latest release is 1.0.1 (changelog, upgrading guide, diff from 0.12)If you're using Chaplin with Backbone, you will need lodash / Underscore and jQuery / Zepto.There is another option: you can use Exoskeleton. Exoskeleton is a faster and leaner Backbone for your HTML5 apps. It allows you to totally drop these dependencies. Just include Exoskeleton with Chaplin and you're done.If you’ll be using Chaplin with AMD, you will also need an AMD module loader like RequireJS, Almond or curl to load Chaplin and lazy-module application modules.Brought to you by Mathias Schäfer Paul Miller Ryan Leckey and others Hosted on GitHub Pages. The content on this website is licensed under a CC BY 3.0.