command line utility for isomorphic webapps
npm install -g isomorphicisomorphic new your-app # --todo (for example app)cd your-app && npm installisomorphic server
*Typically and **without jumping through hoops
"MY SERVER WILL NEVER BE IN NODE AND I WILL NEVER USE MONGO." -- PHP CEO
Note: Your backend server can still be written in Node.js, which can of course still use Mongo.
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.
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).
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 = require'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
isomorphic new your-app --todo will install the example application.
This application is:
The todo example extends TodoMVC to show a slightly more complex application with routing, and an API.