Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LinemanJS

 LinemanJS

Presented on MeetJS Wrocław meeting in Poland.

Adam Stankiewicz

September 24, 2014
Tweet

More Decks by Adam Stankiewicz

Other Decks in Programming

Transcript

  1. 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 | +-----------------------+ +------------------------+
  2. 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 | +-----------------------+ +------------------------+
  3. 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
  4. 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 | +------------------+ | | +-----------------------+ +------------------------+
  5. 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 | | | | +-----------------------+ +-----------------------+---------------+
  6. 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" ]
  7. API mocks (development) module.exports = { drawRoutes: function(app) { app.get('/api/greeting/:message',

    function(req, res){ res.json({ message: "OK, "+req.params.message }); }); } };
  8. 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' } }
  9. Other features • Custom pages • Heroku buildpack • SASS

    support (ruby required in development) • LiveReload (both script and browser extension) • JSHint • Sourcemaps • Plugins!
  10. 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