Koa

That Conference 2018 – Launching with Now, Next, and React

Posted by

0

That Conference 2018, Kalahari Resort, Lake Delton, WI
Launching with Now, Next, and React

Day 2, 7 Aug 2018  10:30 AM

Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2018 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.

Executive Summary

  • Summary of tech stack used at Northwest Mutual and on Nicholas’ personal project
  • Recommend combination of micro services and micro apps
  • Koa vs. Express
  • Use Next?

 

Micro-Service vs. Micro-App

 

Micro-Service

  • Encapsulate business logic
  • Encapsulate persistent data
  • Reusable, stand-alone solution
  • Not always a 1:1 relationship between micro-apps and micro-services
  • Independent
  • Tidy, clean

 

Micro-App

  • Client facing code
  • May call mlutiple micro-services for data or computations
  • Handle interactions and specific complex problems
  • Aggregates inof from multiple services

 

The Tech Stack

  • Node
    • Released support for async/await
  • Koa – “fix” Node; minimal lib as extraction of HTTP module of Node
    • Solves same problem as Express
    • Promises, async/await
    • Now at Koa 2–far less confusing than Koa 1
    • Choice for micro-service
    • Avoids “callback hell”
    • Choice: Express vs Koa
  • Express – augmentation for node that allows setting up simple server
    • Can end up “callback hell”–messy callback architecture
  • PostgreSQL
  • React
  • Next – like React, but SSR a bit differently than React does SSR
    • Also bundled with some “auto magical” elements
    • Good for supporting SEO
  • Redux – state management tool
    • Source of truth that feeds application

 

React

  • React 16 solved a lot of problems
  • React portal
    • Render a component and drop it somewhere else in your application
    • Specify what to render, where to render it
  • Fragment
    • Can return multiple components (e.g. HTML elements)
    • <React.Fragment>
    • Could return several table columns, not wrapped in <div>
  • Context API
    • Have state that’s inherited down with component hierarchy
    • Avoid passing things down the tree

 

Next

  • Recent update that took advantage of all of React 16
  • Does things “auto-magically”, secretively, just works out-of-the-box
  • You call next command; it fires up server, automatically does various things
  • No longer have to explicitly import React into any of your components

 

Decisions – Handling Server Requests

  • For API used Kora – conceived for and caters to async/await funcs
  • For apps, used Express
  • Subtle differences between the two
    • Express is lower barrier to entry
    • Tons of tutorials out there
  • Most differences deal with middleware
  • For middleware-heavy apps, Koa better

 

Decisions – Rendering

  • Client-side vs. server-side
  • If SEO is concern, server-side might be simpler to roll out
  • Server-side rendering opens the door to some PWA setups (Progressive Web App)
  • Client-side rendering makes SEO harder
  • For server-side: React vs Next?
  • Anxiously awaiting React’s async rendering
  • Went with Next

 

Decisions – State Management

  • There are many options, and tons of patterns
  • Redux vs MobX vs others
    • MobX worth a look if you’re starting from scratch
  • Meiosis Pattern
  • Context API  (in React)

 

ThinkMinded Architecture

  • Micro Service (just 1)
    • Node, Express
  • Micro App
    • React, Next, Node, Express
  • Has mindset of allowing others to consume our data
    • So micro service is a standalone API

 

Micro App Architecture (ThinkMinded)

  • Redux
  • Redux store has sequence
    • Action => Dispatcher
    • Reducer
    • State
    • => Back to GUI

 

Engineering – React

Engineering – React / Redux

Engineering – Next / Redux

  • Similar to above, but don’t import React
  • Biggest difference, package.json changes, use next commands to do everything
  • Next uses Webpack
  • Next automatically creates API, based on file system
  • Hot module re-loading
  • Automatically indexes

 

Deploying with Now

  • Now is a platform for global deployment
  • Generates a URL upon deployment (staging)
  • (vs Gitlab)
    • Gitlab for bigger teams
    • Now has nice CLI
  • Staging can then be aliased to production
  • Works to deploy Node.js apps and docker powered apps
  • Preferred for short/small personal projects