Introducing Marionette-Require-Boilerplate for Your Single Page Application

Marionette-Require-Boilerplate (MRB) is a simple boilerplate I created to help get Single Page Applications off the ground with a small starter project. It incorporates a number of great tools and best practices to save time in the early stages of a project.

MRB integrates such cutting edge libraries as Backbone, Marionette, Require, Grunt, Jasmine, Bootstrap and jQuery Mobile, among others. These libraries work together to help you start your project off with a rock-solid foundation, with a powerful module system, composite architecture, simple build process, and unit tests. Marionette-Require-Boilerplate is part of the BoilerplateMVC suite, which includes standouts like Backbone-Require-Boilerplate, the inspiration and basis for MRB. Stay tuned for more from the BoilerplateMVC team!

The GitHub repo has more extensive documentation, but in this post I’d like to introduce some of the underlying technologies and explain what makes MRB a great place to start for your SPA.

Marionette

Marionette is a framework that sits on top of Backbone and provides a composite architecture and a set of tools to help you solve some of the most common problems in Backbone applications, including nested views and layouts, memory management and cleanup of zombie views, and event-driven architecture. Backbone is a fantastic library and provides many useful pieces, but its great strength — lightweight flexibility — is also its great weakness. It is not a framework and leaves you to figure out some basic functions, like how best to create and remove views, or how to nest views within each other.

If you are not confident in your ability to competently architect a Backbone JS application, or you’re just looking to save time, then Marionette is the tool for you. Read more about what it has to offer in the Marionette chapter of Addy Osmani’s Backbone Fundamentals e-book.

Require

RequireJS is the most popular implementation of the Asynchronous Module Definition (AMD) spec. It provides a powerful, flexible and consistent way to organize your application into separate modules with clearly defined dependencies. It allows you to load these modules as separate files asynchronously in your code, or use the r.js optimizer to load all of your modules in a single, minified JS file for production builds.

Note: Marionette has a concept of Module that is very different from the RequireJS “Module” concept. Do not confuse the two. In Require, a module is simply a unit of code that is run once and returns a function or object of some kind for use in other modules. In Marionette, a Module is essentially a section of your application that can be started or stopped, serving as a coarse grain method of organizing your code. It would be possible to define a Marionette Module in a Require Module if you like, but your head might explode.

Bootstrap and jQuery Mobile

Twitter Bootstrap is a leading front-end UI framework for building rich web applications. It includes a large set of CSS classes and jQuery widgets that you can add to your markup to transform it into beautiful, sleek and customizable UI elements. It is an ubiquitous framework — popular because it helps developers who lack certain design skills to easily crank out clean, elegant UIs with minimal effort and non-invasive code and CSS. jQuery Mobile is a leading UI framework for mobile applications that builds on jQuery UI and brings a number of mobile-friendly widgets and controls to the table.

Mobile vs Desktop

MRB uses a scheme (borrowed from Backbone-Require-Boilerplate) that detects the user’s browser and loads either Bootstrap or jQuery Mobile accordingly. It also loads either the Desktop Marionette Controller or the Mobile Marionette Controller. In Marionette, a Controller handles a Router’s routes, and is used to instantiate Models and Views and show them in appropriate Regions or Layouts.

In MRB, the Mobile/Desktop Controllers load Views which work with either jQuery Mobile or Bootstrap (for instance, MobileController loads a MobileHeaderView, while DesktopController loads a DesktopHeaderView). This is our strategy for differentiating behavior and UI elements for mobile or desktop. This is just my strategy, and it may or may not work well for you, so take it or leave it. If you don’t want to worry about the mobile/desktop dichotomy up front, you might consider checking out Marionette-Require-Boilerplate-Lite, which eschews this division and skips jQuery Mobile in favor of a purely Bootstrap approach. Whichever you prefer.

Grunt

Grunt is a first-rate build tool built on Node which allows you to run any number of compatible plugins. In MRB, we use Grunt to execute our RequireJS Optimization, minify our JavaScript and CSS, and run JSHint to detect bugs in our code.

Jasmine

MRB uses Jasmine to execute and manage unit tests. Jasmine’s syntax is very readable and makes it an attractive choice for unit tests.

Handlebars

Handlebars is our templating engine of choice. It offers a clean, friendly syntax that discourages excessive logic in your views, and is a popular choice these days over EJS-style templating options like Underscore’s _.template(). In MRB, we use the require-handlebars-plugin to automatically load our templates as AMD modules, pre-compiled (read: big performance boost) and with custom helper methods and i18n support.

Node HTTP Server

MRB runs a simple Node HttpServer on port 8001. This is not necessary, but since Grunt and the RequireJS optimizer both run on Node, it is a reasonable assumption that the user will have it installed. If you don’t want to run MRB on Node, you can just as easily point a simple Apache web server at the public/ directory in the project. A web server is required; using the plain file system won’t work because of RequireJS’s dynamic loading of resources.

Best Tools plus Best Practices

With Marionette-Require-Boilerplate, I have attempted to bring together a collection of great tools and best practices to help web applications get started quickly and with a firm footing. I hope you find it as useful as I have. I’d love to hear your feedback, so follow me on GitHub or hit me up on Twitter!

112 thoughts on “Introducing Marionette-Require-Boilerplate for Your Single Page Application

  1. Pingback: glass vibbrator

  2. Pingback: professional private investigators

  3. Pingback: flexible dildo

  4. Pingback: best realistic vibrating dildo

  5. Pingback: Best Sex Toys for Men

  6. Pingback: canada50

  7. Pingback: adamandeve.com

  8. Pingback: robert

  9. Pingback: advertise writer job

  10. Pingback: advertise teaching job

  11. Pingback: advertise artist job

  12. Pingback: clínica de Internação

  13. Pingback: advertise pharmacist job

  14. Pingback: دانلود قسمت 14 فصل دوم شهرزاد

  15. Pingback: دانلود قسمت چهارده شهرزاد دوم

  16. Pingback: دانلود قسمت 16 فصل دوم شهرزاد

  17. Pingback: دانلود قسمت چهارده شهرزاد دوم

  18. Pingback: girl porno

  19. Pingback: girl porno

  20. Pingback: punk girls

  21. Pingback: burning angel porn

  22. Pingback: دانلود قسمت شانزده شهرزاد دوم

  23. Pingback: دانلود قسمت چهارده شهرزاد دوم

  24. Pingback: دانلود قسمت 16 فصل دوم شهرزاد

  25. Pingback: دانلود قسمت سیزده شهرزاد دوم

  26. Pingback: دانلود قسمت شانزده شهرزاد دوم

  27. Pingback: دانلود قسمت 13 فصل دوم شهرزاد

  28. Pingback: دانلود قسمت 13 فصل دوم شهرزاد

  29. Pingback: girlsway

  30. Pingback: دانلود قسمت سیزده شهرزاد دوم

  31. Pingback: With Every Heartbeat

  32. Pingback: alt emo porn

  33. Pingback: Fantasy Factory 2

  34. Pingback: دانلود شهرزاد

  35. Pingback: adam and eve

  36. Pingback: دانلود شهرزاد

  37. Pingback: http://benclarkphotography.com.au/

  38. Pingback: دانلود قسمت پانزده شهرزاد دوم

  39. Pingback: دانلود قسمت 15 فصل دوم شهرزاد

  40. Pingback: دانلود فصل دوم شهرزاد

  41. Pingback: true feel dildo

  42. Pingback: دانلود قسمت پانزده شهرزاد دوم

  43. Pingback: دانلود قسمت 15 فصل دوم شهرزاد

  44. Pingback: under armour outlet

  45. Pingback: دانلود فصل دوم شهرزاد

  46. Pingback: battle anime

  47. Pingback: nba jerseys melbourne

  48. Pingback: cheap stocks

  49. Taj

    The powder slips into each nook and cranny, lubricating
    the metal and making it much easier to untie the knot along
    with your fingers.

    Reply
  50. Pingback: InventHelp George Foreman Commercials

  51. Pingback: political commentary

  52. Pingback: InventHelp company

  53. Pingback: adam and eve sex toys

  54. Pingback: nairaland

  55. Pingback: oral sex kit

  56. Pingback: naija land

  57. Pingback: naija land

  58. Pingback: nigerian forum

  59. Pingback: InventHelp inventions

  60. Pingback: Facial Spa Services Deerfield Beach

  61. Pingback: Acne Facial Treatments Plantation

  62. Pingback: open source php developer

  63. Pingback: Facial Spa Services Lauderdale-by-the-Sea

  64. Pingback: Facial Spa Services Lighthouse Point

  65. Pingback: Acne Facial Treatments Pembroke Pines

  66. Pingback: https://goo.gl/2a9D1e

  67. Pingback: Adult Toys

  68. Pingback: Acne Facial Treatments North Lauderdale

  69. Pingback: Porn Stories

  70. Pingback: Couple

  71. Pingback: magic wand massage

  72. Pingback: دانلود قسمت 17 سریال عاشقانه

  73. Pingback: polythene manufacturer

  74. Pingback: دانلود قسمت 17 عاشقانه

  75. Pingback: دانلود قسمت پنجم فصل دوم شهرزاد

  76. Pingback: qnet indonesia

  77. Pingback: دانلود قسمت 17 سریال عاشقانه

  78. Pingback: bed bug exterminators near me

  79. Pingback: best mice exterminators

  80. Pingback: دانلود پنجم فصل دوم شهرزاد

  81. Pingback: Redmond exterminators

  82. Pingback: Redmond pest control service

  83. Pingback: دانلود قسمت 17 سریال عاشقانه

  84. Pingback: دانلود پنجم فصل دوم شهرزاد

  85. Pingback: magnetic paper

  86. Pingback: qnet ora umum

  87. Pingback: دانلود پنجم شهرزاد دوم

  88. Pingback: Woodinville pest control service

  89. Pingback: http://damen-trachtenblusen.trachten-dirndl2017.com/distler-trachtenbluse-in-verschiedenen-designs-kaufen/

  90. Pingback: qnet indonesia

  91. Pingback: http://herren-trachtenwesten.trachten-dirndl2017.com/krueger-trachten-weste-jagdaufseher-mit-hirschstickerei-blau-hochwertiges-trachtengilet-fuer-herren-zur-lederhose-guenstig-online-kaufen/

  92. Pingback: http://www.trachten-dirndl2017.com

  93. Pingback: cost of mice extermination

  94. Pingback: qnet penipuan

  95. Pingback: Bellevue exterminators

  96. Pingback: http://herren-trachtenjacken-strickjacken.trachten-dirndl2017.com/schneiders-herren-sakko-basilius-tracht-bestellen/

  97. Pingback: ant exterminators seattle

  98. Pingback: Android firmware

  99. Pingback: http://dirndl.dirndl-angebote-2017.com/dirndl-set-trachtenkleid-473gt-rot-weiss-kariert-guenstig-kaufen/

  100. Pingback: Alfonso

  101. Pingback: Edith

  102. Pingback: Edith

  103. Pingback: Delois

  104. Pingback: http://dirndl.dirndl-angebote-2017.com/midi-dirndl-natalie-in-grau-von-almsach-kaufen/

  105. Pingback: best realistic dildos

  106. Pingback: best p spot massage

  107. Pingback: http://www.freemerchantnetwork.com/company/Dr.PaigeWoods,DDS/CA/92120/619-359-6569

  108. Pingback: e bike online

  109. Pingback: egg vibrator

  110. Pingback: http://www.localnoggins.com/node/86257

  111. Pingback: http://www.californiaibd.com/company/Dr-Paige-Woods-DDS_18220736/

Leave a Reply

Your email address will not be published. Required fields are marked *