rowno/architect

Web app for editing Javascript templates in various engines.

Architect - Javascript Template Editor

Web app for editing Javascript templates in various engines.

Making and Credits

Architect started life as a simple page for testing Mustache templates, but quickly evolved into a web app for editing templates in all the popular Javascript templating engines.

Architect was made using native DOM methods (no jQuery) and without any polyfills. I did this as a learning experience and to avoid jQuery and polyfill bloat. Since the app is targeted at web developers, browser support shouldn't be a problem (if you're a web developer using an outdated browser, shame on you!).

Below are all the HTML5 features and open source components used by Architect, and what they're used for:

HTML5

• JSON - JSON view parsing.
• Application Cache and LocalStorage - offline access.
• Web Workers - threaded template rendering and template engine sandboxing.
• Media Queries - responsive layout.
• WAI-ARIA - accessibility.

Components

• HTML5 Boilerplate - base HTML and app structure.
• Twitter Bootstrap - base CSS, components and responsive layout.
• Modernizr - feature detection and script loading (yepnope.js).
• Ace - code editors.
• Hogan.js - mustache templates.
• HTML5 Please API - user friendly unsupported browser message.

License

Architect is released under the MIT license.

Copyright © 2012 Roland Warmerdam.

architect's Issues

Display render error messages

Display render error messages on the web page rather than logging them to the console.

Current status of this project

Hi, is this project still maintained?

Add installable web app support

Add installable web app support so that the app can be distributed on the Chrome Web Store and Mozilla Marketplace.

For the Chrome Web Store a Hosted App .crx file needs to be created.

For the Mozilla Marketplace a Open Web App manifest needs to be created.

Add a Save Button and Dialog for the Template

Could you add a Save button and dialog for the Template?

WAI-ARIA

Make the application accessible using the WAI-ARIA specification.

Save application state

Save the application's state using localStorage.

This simply involves saving the selected template engine and the content of Template and View editors on either page close or an interval.

Add apple-touch-icon's

apple-touch-icon.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-precomposed.png

Improve browser support

Improve browser support (mainly IE and mobile browsers) by using polyfills or other workarounds for the compulsory HTML5 features.

Compulsory HTML5 features used (newest browsers not supporting listed):

• Worker (IE 9, Android 4.0, iOS 4.2-4.3)
• textContent (IE 8, mobile?)
• forEach (IE 8, mobile?)

Solutions:

• Worker polyfill?
• textContent can be avoided by using jQuery.
• forEach can be supported by using a polyfill or replacing it with native for loops.

Only IE8+ (possibly IE9+) needs to be supported. Polyfills/workarounds will be loaded by Modernizr.

Browser support is also limited by Ace.