To the dolphin factory is less than half a year is once again “embrace change”.

However, both the previous wireless H5 team, and now the flight H5 team. Always maintaining the size of an entrepreneurial team (you can count on one hand).

The new boss mentioned that as a small team, air ticket H5 team would play the role of “white mouse”, requiring rapid iteration and agile development as a testing ground for innovative projects.

For me personally, what is most profound is the endless sense of crisis.

I discussed with my senior in Ali from the ease of use of React to the significance of iteration and upgrading of new front-end technologies. Finally, I concluded that all technologies are hot chicken. Frankly speaking, upgrading is to continue to move with another brick. Feel helpless ~

Front-line development is a resource, is a screw, there is no problem.

How about making a universal screw first?

Or, if I have the opportunity to be the technical leader of a startup company, what should I do?

Think too much is not happy, not as direct stem ~

THE WAY TO FULL STACK

Node + Koa + React View on Github

The back-end frameworkKoa

Koa, built from the original Express team, provides only a lightweight and elegant library of functions that makes writing Web applications a breeze.

  • The Koa framework is used to build back-end services as the entrance and container for the SPA.

  • Use a single-responsibility KOA-Router with a front-end React-router. Handling external direct Landing, in-place refresh, and distinguishing 404 pages:

var ThrowToHomePage = async function (ctx, next) { console.log('EVR in router:',process.env.NODE_ENV); ctx.state = { env: process.env.NODE_ENV, cdnUrl: CDN_URL }; Await ctx.render('index', {// go to front root}); }; var ThrowToErroPage = async function (ctx, next) { console.log('EVR in router:',process.env.NODE_ENV); ctx.state = { env: process.env.NODE_ENV, cdnUrl: CDN_URL, message: 'error', error: {status:404,stack:'stack:'} }; Await ctx.render('error', {// go 404}); }; router.get('/', ThrowToHomePage); router.get('flight', ThrowToHomePage); router.get('hotel', ThrowToHomePage); router.get('train', ThrowToHomePage); router.get('*', ThrowToErroPage);Copy the code
  • Backend unique View using ejS template engine as main application:
<%- include('header') -%>

  <div id='app'></div>

<%- include('footer') -%>
Copy the code

Front-end related technical architecture

  • Using the increasingly mature JS language standard ES6, using Less preprocessor language: sample code
  • React + ReactDOM is used for componentized development of the framework front end
  • React-router: the core of SPA and works with back-end routes to apply the Router
<Router key={Math.random()} history={browserHistory} >
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>

    <Route path="flight" component={Flight}>
    </Route>

    <Route path="flight/:citys" component={FlightList}>
    </Route>

    <Route path="train" component={Train}>
    </Route>

    <Route path="hotel" component={Hotel}>
    </Route>
  </Route>
</Router>
Copy the code
  • Module: ES6 Module
  • React-router-transition, as a SPA, is meant to be silky and smooth
var App = function ({ children, location }) { //children = React.children styles = location.action === 'POP'? presets.slideRight: presets.slideLeft; return ( <div> <Header /> <RouteTransition className="transition-wrapper" pathname={location.pathname} runOnMount={false} {... styles}> {children} </RouteTransition> </div> ) }Copy the code

Build: Webpack + Babel

Webpack is the perfect packaging tool for SPA and ES6!! For webpack.config.js configuration:

  • The library files external
externals: {
  'zepto': 'window.$',
  'react':'window.React',
  'react-dom':'window.ReactDOM'
},
Copy the code

For Jquery, Zepto, React, etc., you can mount it directly to the global object reference. There is no need to compile again through the Webpack process.

  • Common component CommonsChunkPlugin
entry: {
  router: ['react-router'] // CommonsChunkPlugin
},  
plugins:  [
  new webpack.optimize.CommonsChunkPlugin('router','[name].bundle.js')// CommonsChunk
]
Copy the code

For non-official plug-ins like React-Router, it is best to download stable and compile it yourself.

  • Style files are packaged separately
new ExtractTextPlugin("./css/IBU.H5.flight.css")
Copy the code
  • Hot Module Replacement

Crazy!!!!!! Ye!!!!!! Cool!!!!!! Hanging fry day!!!!!! For details, see – > Tutorial.

It’s said to work in production environments, but officially it’s not stable. Blunt! Please stamp stamp

The official one is the one that can be trusted. Yeah.

The end is not the end

There’s something missing here, right?

So we can start the full stack development SPA?

We have the front end, we have the back end. Data?

Slash-and-burn Node check DB directly

There is still a long way to go to become a professional backend or even full stack developer.