Developers

Mosaico is heavily based on Knockout.js for templating and binding. Knockout architecture was ideal to build a flexible Email Editor without compromising performance.

Strong Dependencies

These are used a lot in the code, so I don't think they will get replaced anytime soon. Some component (like the template parser/converter) have lighter dependencies (it can be run on the server side, too)

• Knockout
• jQuery
• jQuery-UI
• Knockout-jQueryUI KO bridge to widgets
• Knockout-Sortable KO bridge to jQuery sortable
• Knockout-Undomanager our own undo/redo library for Knockout
• Mensch - A decent CSS parser

Lighter dependencies

These dependencies could be replaced with others, having enough time and will ;-)

• Tinymce for text editing: We already added a lot of tweak for TinyMCE "inline", so I don't suggest anyone to try using "Inline CKEditor", but it should be feasible.
• Toastr for on screen notifications: easy to replace.
• Evo-Colorpicker to pick colors: could be replaced, but we liked this more than other colorpickers.
• jQueryUI-Touch-Punch for touch support: if you want to "touch" anything you need this because Mosaico doesn't deal with touch events.
• jQuery-FileUpload (load-image, canvas-to-block...): this could be replaced with a lightweight upload library, but we already had implemented this one when we still supported IE8 and it works fine, so we never decided to move further)

Components and Architecture

• The main "input" for the library is the html template: loading a template means parsing it, creating the "editors" and creating the "editable blocks".
• So the input template runs through the "Converter" that outputs a "template definition model" and a set of knockout templates that will be used for the wysiwyg editing and for the preview/output generation.
• The "template definition model" is also processed by the "editors generator" that will generate knockout templates to be used for editing.
• The "template definition model" is also processed by the "model generator" that generates the "content model" specific for the original template and a "block model" for each block defined by the template.

Build/Tests Dependencies

• Grunt for the build
• Bower for the dependencies
• Browserify for the client bundle
• Jasmine for testing (well, we need a lot more tests!!!)
• PhantomJS for the template thumbnails generation process