JavaScript Everywhere

How we use JavaScript everywhere throughout our out-of-the-box product baseline monorepo

What

Using JavaScript and it's many forms and implementations to build an entire product ecosystem:

  • Web apps
  • Mobile apps
  • API's
  • Infrastructure
  • Build & deploy scripts
  • Data

Why

  • 👯 Client success; our success is a byproduct  of theirs
  • 🏃 Speed is ruler; nothing is of value until it is in front of a customer
  • 🧘🏼 Focus on important things such as customer goals, user experience, accessibility, unit tests, mock data etc.
  • 🏗 Architecture has changed; weaknesses become strengths
  • 🗣 TypeScript has turned JavaScript into one of the most progressive languages in the more recent years

The Philosophy

  • minimise waste, reduce complexity, build faster, grow confidence
  • promote team-wide best practice at all SDLC stages
  • maximise component & data re-usability
  • heighten security & accessibility at all layers
  • increase scalability whilst reducing costs
  • promote a culture of shared ownership, accountability & full-stack engineering; code is code
  • de-risk product launches
  • uplift developer happiness & confidence

The Language

  • Because JavaScript is a language without faults or flaws with some faults and flaws
  • Hello TypeScript, steroids for JavaScript

Hedge your bets smartly

Github State of the Octoverse
https://octoverse.github.com/

Stackoverflow 2020 Developer Survey
https://insights.stackoverflow.com/survey/2020

JavaScript Community + Popularity

The Architectural Revolution

  • This is not a serverless talk, but it's hard to avoid!
  • Ephemeral, serverless functions: NodeJs shines
  • "Infinite" scale: we scale by running more simultaneous functions rather than a single server (and we can run as many as we want); no servers to configure, monitor or threads and memory to lose sleep over
  • API's, Scheduled Jobs, Reactive Services/Queues
  • Pay for what we use (or nothing at all, free tiers)
  • Removed need for servers, dockers or containers; we just write customer/business logic now (and 10 lines of deployment code)

The Love Sharing

  • React + React-Native share a Redux store
  • Utilities & config shared across entire codebase
  • Test mock data shared between components and use for local dev

How

  • 🦸 Clients:
    • Web App/s: React
    • Web Static (Marketing, Blog etc.): NextJS/React (server-less side rendering)
    • Mobile (iOS, Android): React-Native
    • Store: Redux (shared)
  • ⛽️ Services:
    • API's: NodeJS, GraphQL (serverless)
    • Sockets: Websockets (serverless)
    • Scheduled Jobs: NodeJS (serverless)
    • Queues/Reactive Services: NodeJS (serverless)
  • 🧱 Infrastructure:
    • AWS CloudFormation: TSNode Scripts, T/JSON Config
  • ⭕️ Persistence:
    • Data as JSON (utilize NoSQL)

What else?

  • Data
    • Realtime ETL (​Extract Transform Load) processes (serverless)
  • Desktop apps:
    • PWA (Progressive Web App)
    • React-Native for Windows/MacOS
    • React-Native-Web
    • Electron
    • etc.

ClevaQ is a real-time food & beverage ordering ecosystem used within hospitality venues throughout Australia.

  • used daily by dozens of large venues and their patrons
  • thousands of transactions daily
  • ~$400 monthly infra costs

Sunee is an extremely popular healthy recipe and lifestyle product used by millions of people the world over.

  • 1+ million unique hits on launch day
  • 100k+ concurrent users on launch day
  • $~3000 infra cost the first month, ~$500 thereafter

Proof

Takeouts

  • Don't limit idea of  JS/TS use to browsers or even API's
  • Where to start? Build your next event-driven service in NodeJS serverless
  • Migrate your build & deploy scripts to NodeJS / TSNode
  • Automate your architecture using JS/TS
  • Add TypeScript to your Webpack configs and rename all of your files *.js > *.ts

Cheers 🥂

matthewrowles@gmail.com

github.com/mrowles

twitter.com/mjrowles

slides.com/mjrowles

medium.com/@mjrowles

linkedin.com/in/mjrowles

Made with Slides.com