LinemanJS

Presented on MeetJS Wrocław meeting in Poland.

Transcript

1. LinemanJS by @sheerun
2. Traditional Web Application +-----------------------+ +------------------------+ | Browser | | Server | |-----------------------| HTTP Request |------------------------| | - Parse & Render: | (Form Data) | - Render Templates | | -- HTML | --------------------> | - Routing (App & API) | | -- CSS | | - Security | | -- JavaScript | "Full Page Reload" | - Authentication | | | | - Data Storage | | | <-------------------- | - Application Logic | | | HTTP Response | - Domain Logic | | | (HTML, JS, CSS) | - Asset Management | | | | - Static Asset Serving | +-----------------------+ +------------------------+
3. Modern Web Application +-----------------------+ +------------------------+ | Browser | | Server | |-----------------------| HTTP Request |------------------------| | - Parse & Render: | (JSON Data) | | | -- HTML | --------------------> | - Routing (API) | | -- CSS | | - Security | | -- JavaScript | "Partial Rendering" | - Authentication | | - Render Templates | | - Data Storage | | - Application Logic | <-------------------- | | | - Routing (App) | HTTP Response | - Domain Logic | | | (JSON Data) | | | | | - Static Asset Serving | +-----------------------+ +------------------------+
4. Lineman directory structure . ├── app │ ├── js # <-- JS & CoffeeScript │ ├── img # <-- images (are merged into the 'img' folder inside of generated & dist) │ ├── static # <-- other static files that need to be placed in a path relative to `/` │ └── pages # <-- static HTML pages (underscore and handlebars templates are supported) │ └── index.us # <-- a template used to produce the application's index.html │ └── templates # <-- client-side templates │ ├── other.us # <-- other templates will be compiled to a window.JST object │ └── thing.hb # <-- underscore & handlebars are both already set up │ └── _partial.hb # <-- a handlebars partial, usable from within other handlebars templates ├── config ├── dist # <-- Generated, production-ready app assets ├── generated # <-- Generated, pre-production app assets ├── grunt.js # <-- gruntfile defines app's task config ├── package.json # <-- Project's package.json ├── tasks # <-- Custom grunt tasks can be defined here ├── spec └── vendor
5. lineman run (development) +-----------------------+ +------------------------+ | Modern Client | | API Server | |-----------------------| apiProxy |------------------------| | Lineman: | <------------------> | Any Backend Platform: | | - Any Client MV* | | - Security | | - Test Execution | OR | - Auth | | - CI Integration | | - API Routing | | - Build Tool | <------------------+ | - Application Logic | | - Coffee, JavaScript | | | - ORM | | - SASS, Less | apiStubbing | | | | - Dev Server | | | | | - pushState Simulator | +------------------+ | | +-----------------------+ +------------------------+
6. lineman build (production) +-----------------------+ +---------------------------------------+ | Modern Client | | Production Application Server | |-----------------------| `lineman build` +-----------------------+---------------| | | | | | | Lineman: | -------------------> | build artifact: + | web front end:| | - Any Client MV* | | ./dist | | - nginx/apache| | - Test Execution | | - index.html | | - app server | | - CI Integration | | - app.css +-------+ public/html | | - Build Tool | | - app.js | | | - Coffee, JavaScript | | - img/* | | | - SASS, Less | | | | | - Dev Server | | | | | - pushState Simulator | | | | +-----------------------+ +-----------------------+---------------+
7. lineman build (production) appTasks: common: [ "coffee", "less", "jshint", "handlebars", "jst", "concat", "images:dev", "webfonts:dev", "pages:dev" ] dev: [ "server", "watch" ] dist: [ "uglify", "cssmin", "images:dist", "webfonts:dist", "pages:dist" ]
8. API mocks (development) module.exports = { drawRoutes: function(app) { app.get('/api/greeting/:message', function(req, res){ res.json({ message: "OK, "+req.params.message }); }); } };
9. API proxying (production) server: { // enables HTML5 pushState; // Lineman will serve `generated/index.html` // for any request that does not match the apiProxy.prefix pushState: true, apiProxy: { enabled: true, port: 3000, // request paths that contain 'api' // will now be the only ones forwarded to the apiProxy prefix: 'api' } }
10. Other features • Custom pages • Heroku buildpack • SASS support (ruby required in development) • LiveReload (both script and browser extension) • JSHint • Sourcemaps • Plugins!
11. Cascading configuration 1. Application configuration 2. Plugin configuration 3. Lineman defaults
12. lineman-angular-template 1. Template Precompilation into Angulars $templateCache 2. A basic login, logout service bound to sample routes 3. Unit Tests and End-to-End Tests 4. Configuration to run Protractor for End-to-End Tests
13. Questions?