Skip to content

Developers

Jump to bottom Edit New page
J2EEbbesen edited this page Oct 8, 2015 · 8 revisions

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 components (like the template parser/converter) have lighter dependencies (it can be run on the server side, too)

Lighter dependencies

These dependencies could be replaced with others, if you have enough time and determination ;-)

  • Tinymce for text editing: We already added a lot of tweaks 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
  • Knockout-Undomanager our own undo/redo library for Knockout: you can remove this if you don't need the undo/redo feature.

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" specifically 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
  • LESS and Autoprefixer for the CSS
  • Jasmine for testing (well, we need a lot more tests!!!)
  • PhantomJS for the template thumbnails generation process
Add a custom footer
Add a custom sidebar
Clone this wiki locally