Trying to figure out some framework requirements. What I need is:
- Single JS file from multiple JS files (modules)
- Offline app loading
- Client-side undoable persistent deferrable commands
For offline apps loading, offline HTML manifest works just fine. There is a trick, though - to be able to load a non-mentioned resource in the manifest file (in development mode), one have to add
in addition to usual resources section.
Another note: if there is any problem while loading resources from the manifest file, all other files of the app are not re-loaded.
This is quite critical - you have to make sure that all resource files are present.
It is cool to have a single JS file, but I'd like to have the similar for the CSS.
For this, Sass looks rather good, given that it optimizes @imports + gives tons of syntax sugar for CSS.
Adding Sass wasn't difficult:
- Make sure ruby is installed
Create Gemfile with
source 'https://rubygems.org' gem "sass" gem 'rb-fsevent', '~> 0.9.1' gem 'rake'
gem install bundler && bundle install
require 'sass/plugin' namespace :sass do task :env do Sass::Plugin.options[:template_location] = 'www/scss' Sass::Plugin.options[:css_location] = 'www/css' end desc 'Updates stylesheets if necessary from their Sass templates.' task :update_and_compress => :env do `rm www/css/*` Sass::Plugin.options[:style] = :compressed Sass::Plugin.update_stylesheets end desc 'Watch stylesheets' task :watch => :env do Sass::Plugin.watch end end namespace :requireJs do desc 'Run optimizer/uglifier for JS code' task :optimize do `node r.js -o app.build.js` end end namespace :cl do task :build => ["sass:update_and_compress", "requireJs:optimize"] do print "Done! end end
For automatic conversion of scss files to css peers during the development, I have to keep the following command running:
By the way, Sass mixins are rather useful, given that there are tons existing examples, for instance this Retina support mixin.
HTML offline issues
After having continuous trouble with updating HTML5 offline manifest file and double page refresh after each change I decided to go a way when the
manifest is added to the page only while building the production version of the site. I've added a very simple task to
task :update_for_offline do index = "build/www/index.html" updated = IO.read(index).sub("<html>", "<html manifest='checkvist.manifest'>") IO.write(index, updated) end
So far so good. MVC is almost in place, JS and CSS are united and minified in the project. Time for the real meat.