| OLD | NEW |
|---|
| (Empty) |
| 1 # Minimal Dart Webapp | |
| 2 | |
| 3 A mobile-friendly web app with routing, responsive CSS, and (optional) Sass | |
| 4 support. | |
| 5 | |
| 6 This template features: | |
| 7 | |
| 8 * Responsive web design, thanks to Web Starter Kit | |
| 9 * CSS minification, thanks to Sass | |
| 10 * Inlining scripts, thanks to `script_inliner` | |
| 11 * Routing and views, thanks to `route_hierarchical` | |
| 12 * Handling input, thanks to `dart:html` | |
| 13 | |
| 14 ## Responsive | |
| 15 | |
| 16 Thanks to Web Starter Kit, this template looks and acts great on | |
| 17 mobile and desktop. Using the styles found in `web/styles`, you can | |
| 18 be assured there is base support for phones, tablets, and laptops. | |
| 19 | |
| 20 The `lib/nav_menu.dart` is required to trigger the menus when on a phone. | |
| 21 | |
| 22 ## CSS minification | |
| 23 | |
| 24 Thanks to Sass, CSS or SCSS files imported by `web/styles/main.scss` | |
| 25 are concantenated and minified during builds. The result is a small | |
| 26 and fast-loading CSS file. | |
| 27 | |
| 28 Look in `pubspec.yaml` for the `sass` dependency. The Sass transformer | |
| 29 does the work of converting Sass into CSS and minimizing it. | |
| 30 | |
| 31 ## Inlining scripts | |
| 32 | |
| 33 To reduce the app startup time, this template inlines the `dart.js` file. | |
| 34 During a build, the contents of `dart.js` are included in the `index.html` | |
| 35 file. | |
| 36 | |
| 37 Look in `pubspec.yaml` for the `script_inliner` dependency and transformer. | |
| 38 | |
| 39 ## Routing | |
| 40 | |
| 41 Any real app needs to deal with different views. _Routing_ is the technique | |
| 42 of responding to changing in the URL and changing the view of the app. | |
| 43 | |
| 44 This template uses the `route_hierarchical` package. Look inside `main.dart` | |
| 45 for the route setup. It's very easy to extend. | |
| 46 | |
| 47 Because this template isn't a full app framework (you should use | |
| 48 AngularDart, Polymer, or other great options in http://pub.dartlang.org | |
| 49 if you want a full app framework), the work of actually switching the views | |
| 50 is simply changing the display properties of different divs. Look inside | |
| 51 of `main.dart` for how different divs are displayed. | |
| 52 | |
| 53 The authors of this template believe in routing, but do admit there are | |
| 54 more scalable ways to manage views. | |
| 55 | |
| 56 ## Handing input | |
| 57 | |
| 58 Using `dart:html`, this template simply finds the necessary input fields | |
| 59 via `querySelector` and binds to their keyUp events. Look inside | |
| 60 `lub/reverser.dart` for an example. | |
| 61 | |
| 62 However, a real app framework will offer robust data binding. | |
| OLD | NEW |
|---|
