Web Engineering

Useful resources to understand the big picture of the Web Team at allaboutapps

Introduction

• Roadmap to becoming a web developer in 2017
• JavaScript's evolution to a first-class language
  • Module Systems
    • ~2009 CommonJS —> Node.js
    • ~2013 AMD / RequireJS —> Browsers
    • ~2015 ES6 Modules —> Both (without a transpiler)
  • ECMAScript 6 / ES6
  • JavaScript Style Guide
  • TypeScript Handbook
• Node.js
  • Why use Node.js – A look behind the scenes of web development
  • CLI tools
  • Application Servers
  • Build Pipeline, e.g. webpack
  • ...
  • How JavaScript works?: Inside V8
    • Part1, Part2, Part3, Part4
• How we work (internal aaa confluence pdf)
  • Stack Summary (internal aaa confluence pdf)
  • Onboarding (internal aaa confluence pdf)
• Frontend
  • …jQuery vs React?
    • jQuery vs React Market Analysis
    • Wow, more code, this can’t be better
    • jQuery versus React.js thinking
  • React vs others
    • React vs Angular vs Vue.js
      • Our argument: Domain specific language
    • Angular 2 versus React: There Will Be Blood
  • Thinking in React (Facebook) — Component based architecture
    • Step 1: Break The UI Into A Component Hierarchy
    • Is Model-View-Controller dead on the front end?
    • JSX
      • Introducing JSX (Facebook)
      • JSX Looks Like An Abomination - But it’s Good for You
• Backend
  • Sorry! currently closed source (licensing is possible)
  • overview monorepo / central internal npm package management
  • demo project —> aaa-backend-demo-dev-public.allaboutapps.at
    • Open API / Swagger
    • GraphiQL
    • GraphQL-voyager
    • (non public) devtools, pghero,

Sample frontend project

Head to prerequisites first.

See aaa-frontend-demo and this guideline (documents each commit).

Complementary ressources

React: State management

• How to handle state in React. The missing FAQ.

  • you might not need them at all, or at least yet

• Let's talk about immutability...

  • Pros and Cons of using immutability with React.js
  • Handling State in React: Four Immutable Approaches to Consider

• Flux architecture - Redux / MobX / Relay implementations

  • Flux Comic
  • Redux Comic
  • Relay Comic
  • MobX
    • 3 Reasons why I stopped using React.setState
  • Flux, Redux, Relay Video Summary
  • Representing GraphQL server-state, Component-Data-Requirements? apollo-client (This is actually uses a Redux store)
    • Apollo Client manages server-side GraphQL data in your React app so you don't have to.

Other interesting articles / projects

• My starred GitHub projects
• Modern JavaScript Cheatsheet: Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
• The Ultimate Question of Programming, Refactoring, and Everything (Intel)
• react-native - Learn once, write anywhere: Build mobile apps with React
• Gatsby - Blazing-fast static site generator for React
• every-programmer-should-know - A collection of (mostly) technical things every software developer should know
• lerna - A tool for managing JavaScript projects with multiple packages.
• npmrc - Switch between different .npmrc files with ease and grace. (for private npm repos)
• intro-to-react - (plain JavaScript ES6) A Hands-On Walkthrough of your first React Web App
• system-design-primer - Learn how to design large-scale systems. Prep for the system design interview.
• developer-roadmap - Roadmap to becoming a web developer in 2017
• clean-code-javascript - Clean Code concepts adapted for JavaScript
• ECMAScript 6 Learning - List of resources to learn ECMAScript 6!
• Older Articles:
  • 9 things every React.js beginner should know - (attention old)
  • [React.js Introduction For People Who Know Just Enough jQuery To Get By](React.js Introduction For People Who Know Just Enough jQuery To Get By)

Useful react related libs (components / frontend libs / eyecandy / universal)

• nivo: provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries
• vw: react + d3 = vx | visualization components
• react-springy-parallax: springy, composable parallax-scroller for React
• formik (formsy alternative): Build forms in React, without the tears
• react-trend - Simple, elegant spark lines
• react-loadable - A higher order component for loading components with promises.
• react-sortable-tree - Drag-and-drop sortable component for nested data and hierarchies
• react-virtualized - React components for efficiently rendering large lists and tabular data
• animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.
• iTyped - Dead simple Javascript animated typing, with no dependencies.
• react-cropper - Cropper as React components
• next.js - Framework for server-rendered React apps