Work in Progress. Not Complete.
npm install -g isomorphicisomorphic new your-app # --todo (for example app)cd your-app && npm installisomorphic server
- Server rendered websites provide SEO and initial page load performance*.
- Client rendered webapps (MVx, etc.) offer a better user experience*, and are faster after the initial page load*. They struggle with SEO** and initial page load performance**.
*Typically and **without jumping through hoops
"MY SERVER WILL NEVER BE IN NODE AND I WILL NEVER USE MONGO." -- PHP CEO
- Simplicity. Make it easy to create high quality, highly performant isomorphic webapps.
- Follow performance best practices: Server rendered HTML; no blocking assets; critical css.
- Piece together simple, great tools, to provide an easy to use CLI and framework, without reinventing the wheel.
- Smart build tools: simple CLI (scaffolding + generators); Unit testing; Gulp tasks.
Note: Your backend server can still be written in Node.js, which can of course still use Mongo.
Libraries / Tools
Flux is very simple: route resolves a promise via services ---> route renders React component ---> component calls action setting initial data ---> action is dispatched ---> store(s) listening to dispatch ---> store updates component ---> user clicks link ---> route resolves promise...
There are a lot of great frameworks out there. React and Flux have a lot of pros. Play around with them and see if they are best for you. Run
npm install -g isomorphic && isomorphic new my-app to explore the example application.
Tools for Single Page Apps
Small isomorphic libraries for routing (Director) and Ajax requests (SuperAgent). Isomorphic wraps these (explained below) libraries, for ease of development. Picked for size, simplicity and isomorphic support.
Jest extends Jasmine, adding useful tools to a test suite. Tests files in
*/__tests__ directories, and automatically mocks dependencies, amongst other things. Picked because it takes no setup (Jasmine does), and pairs nicely with both React and Flux (Facebook tools).
Server / Build
Frontend Node server uses express, with Stylus. This server will likely be relatively simple with the use of an external API. Support for Critical CSS by defining a critical CSS entry point in a route.
Gulp is a stream-based build tool, which is simpler, and more efficient than Grunt. Gulp tasks are defined in outside of the project scaffold, but can be overwritten on a per app basis.
React, Flux and Jest are all Facebook creations. There are plenty of other great tools out there. I've tried many to varying extents, and appreciate the simplicity + power of the Facebook stack. I think React is innovative, and a fun technology to use. There is also a huge benefit in knowing these tools are battle tested on one of the worlds most trafficked sites. These libraries are powerful, and committed to performance.
NOTE: WORK IN PROGRESS.
isomorphic new <app-name> <options...>--todo# --crud (Default: false)# --bower (Default: false)# isomorphic init <app-name>isomorphic server--environmentisomorphic build--environmentisomorphic gulp <task># isomorphic generate <type> <name>isomorphic help <name># isomorphic testisomorphic version
var isomorphic = ;// react and flux dispatcherisomorphicReact;isomorphicDispatcher;// environment support (build options; api config)isomorphicenvironment;// client takes over server.isomorphicisomorphize;// wraps require to prefix filenames with what client/server expecting.isomorphicrequire;// interact with api endpoint on client / server (uses Superagent)isomorphicrequest;// promises to use with superagent in services.isomorphicPromise;// initializes routes on client / server (uses Director)isomorphicrouter;// basic performance statsisomorphicperformance;
*/__tests__/* # Tests -- ex: app/routes/__tests__/*app/* # All server + client codeapp/client.js # Initializes client applicationapp/router.js # Define application routesapp/actions/* # Flux architectureapp/constants/* # Link actions with dispatcher, etcapp/components/* # React componentsapp/dispatcher/* # Flux architectureapp/routes/* # Client + server routingapp/services/* # All requests to API endpointapp/stores/* # Flux architectureassets/* # CSS; Images; Fontsbower.json # Manage Bower (optional)environment.json # Environment / API settingsgulpfile.js # Overwrite gulp tasks defined in isomorphicindex.html # Entry pointpackage.json # Manage NPMserver.js # Initializes server applicationvendor/* # Vendor Assets (Bower Managed, optional).gitignore.jshintrc
- The example todo application can be seen at isomorphic-todo.frontendperformance.com.
isomorphic new your-app --todo will install the example application.
This application is:
- Highly performant. I've seen times under 50ms total (40ms server, 10ms client).
- Proxies (readonly) APIs at isomorphic-todo-api.frontendperformance.com and isomorphic-crud-api.frontendperformance.com.
The todo example extends TodoMVC to show a slightly more complex application with routing, and an API.