Andrew Faulkner
andfaulkner
Recent Tech Decisions
43 points

Following

  • Git

    andfaulkner pattern-design-showcase-webapp-2


    Version control.

  • Babel

    andfaulkner pattern-design-showcase-webapp-2


    Transpiling ES6 and ES7 to ES5, to provide access to newer Javascript features without sacrificing browser compatibility.

  • Bower

    andfaulkner pattern-design-showcase-webapp-2


    Bower was used for a small amount of package management. npm was used everywhere but a few edge cases that only worked with Bower.

  • npm

    andfaulkner pattern-design-showcase-webapp-2


    npm is the app's primary package manager.

  • Node.js

    andfaulkner pattern-design-showcase-webapp-2


    NodeJS drove the app's backend server (ExpressJS), frontend build tools (Gulp and Webpack), linters (ESLint), and most of the database scripts (through Knex and Mongoose)

  • JavaScript

    andfaulkner pattern-design-showcase-webapp-2


    Almost the entire app was written in Javascript, with JSON-based configuration and data storage. The following components were written and/or configured with Javascript:

    • Most server-side scripts, all unit tests, all build tools, etc. were driven by NodeJS.
    • ExpressJS served as the 'backend' server framework.
    • MongoDB (which stores essential JSON) was the main database.
    • MongooseJS was used as the main ORM for communicating with the database, with KnexJS used for certain edge cases.
    • MochaJS, ChaiJS, and ExpectJS were used for unit testing.
    • Frontend builds were done with Gulp and Webpack.
    • Package management was done primarily with npm - with a few exceptions that required the use of Bower (also configured with JSON).
    • "Templating" was done with Javascript dialect JSX.
    • The frontend was build primarily with ReactJS (as the View) and Redux (as the Controller / Store / frontend model).
    • Configuration was done with json files.

    The only notable exceptions were the use of SCSS (augmented by Compass) for styling, Bash for a few basic 'system chores' and CLI utilities required for development of the app (most notably git and heroku's CLI interface), and a bit of custom SQL for locations where the ORM extractions leaked (the app is DB-agnostic, but a bit of SQL was required to fill gaps in the ORMs when interfacing with Postgres).

  • jQuery

    andfaulkner pattern-design-showcase-webapp-2


    Frontend utility library. Use was fairly minimal: lodash, ReactJS, and 'native' ES6 functions now fill the gap jQuery used cover. Will likely be removed in an upcoming iteration.

  • Bootstrap

    andfaulkner pattern-design-showcase-webapp-2


    I wrapped several Bootstrap components with ReactJS (i.e. turned them into ReactJS components), and used them in the app's UI. Also, I used numerous Bootstrap CSS classes in building the app's custom components, along with several Bootstrap plugins.

  • Redux

    andfaulkner pattern-design-showcase-webapp-2


    The application's "Flux" implementation. Used as the frontend data store for ReactJS.

  • React

    andfaulkner pattern-design-showcase-webapp-2


    The vast majority of the app's frontend was built in ReactJS with Redux.js as its flux implementation.