Froont – Introduction and technical overview – So what is Froont?

View Github Repository Open presentation in a new window

MaikuMori

See all presentation from MaikuMori

Froont – Introduction and technical overview – So what is Froont?

0 0

froont-presentation-jsmeet

Presentation for JS Meetup about Froont

On Github MaikuMori / froont-presentation-jsmeet

Froont

Introduction and technical overview

froont.com @froontApp

What I will talk about:

  • What is Froont
  • Demo
  • Technical decisions we made
  • Interactive questions (ask at any time)

So what is Froont?

A web app to make responsive websites.

Responsive

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones).
— Wikipedia

Quick demo

Launch!

Technical challenges

  • WYSIWYG - What you see is what you get
  • Support across various browsers and devices
  • Sane output - pure HTML and CSS

Overview

Quick backend overview

  • Flask (Python micro web framework)
  • Jinja2 Templates
  • MongoDB

Frontend overview

  • Backbone.js
    • Thin layer which provides content separation (Data, Views)
    • Not opinionated
  • Swig templates
    • Fast
    • Jinja2 compatibility, which allows us to use the same templates in frontend and backend.
  • HTML5 APIs

Closer look

DOM

  • Stored as a tree
  • Backbone-relational - one to one, one to many, many to many relations for Backbone models
  • Stored in MongoDB

Rendering

  • Page must look the same in the editor and when it's published
  • Even CSS rendering is the same
  • In editor all widget controls are rendered outside (on top of) the page DOM

Images

  • HTML5 file drag and drop to workspace
  • SVG support
    • SVGs are cleaned up and made smaller before saving
    • Fallback to VML via Raphael
    • Backend fallback to images if browser is too old
  • Dynamic image resizer for each device

UI

  • Backbone-forms with custom editors for CSS properties
  • Raphael.js is used to draw control elements, it offers a lot more customization than plain HTML/CSS
  • move.js to help with CSS3 animations

Testing

It's pain but it pays back in a long run.

Frontend

  • Jasmine - BDD style functional / unit tests
  • Jasmine-jQuery - jQuery helper classes for Jasmine
  • Jasmine-sinon - Sinon glue for Jasmine - mocks, stubs, spies
  • Testem - run tests easily on every browser, including CasperJS (headless WebKit)

Backend (easy)

Unittests + Nose

Questions?

Thanks!

Presentation is available on GitHub:

http://goo.gl/4cXaM

froont.com @froontApp