Skip to content

Instantly share code, notes, and snippets.

/pragmatic-future-minded-angular.md Secret

Created December 30, 2015 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/66d7b42c7c0b0f190b5d to your computer and use it in GitHub Desktop.
Save anonymous/66d7b42c7c0b0f190b5d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pragmatic-future-minded-angular.md

Pragmatic Future Minded Angular

Overview/Conversation Goals

  • "Pragmatic Programmer"-framed view of all the cool new Angular developer stuff

Pragmatic Principles

they are always learning - languages, tools, techniques and methods

they enjoy change

Stone Soup

Use tracer bullets

  • get up and running as soon as possible with Angular2, TypeScript, Rx, Relay, etc.

Some Pragmatic Notes for learning to Develop Future-Facing Angular apps

  • Learn JS before Angular or any other framework, and learn ES5 before ES6
    • understand problems solved by new language features to apply them well
    • understand problems, tradeoffs, and designs of framework
    • don't default to creating classes everywhere; take advantage of JS being conducive to other styles, namely functional

Angular2

Angular2 Aims to Abide Pragmatic Principle "Fix Broken Windows"... a Whole Bunch of

Broken Windows

  • Angular1 module(?) system and abuses
  • directive API

"Rubber Duck Design"

  • "Rubber Duck Debugging" from Pragmatic Programmer
  • thinking differently and pragmatically about what you're writing
    • thinking about publicly exposed interface
    • treating the UI as a Domain model instead of a picture

Module

  • WhyFP quote: "It is now generally accepted that modular design is the key to successful programming...", goes on to cite evidence from a bunch of old languages I've never heard of.
  • internal open source model

Component

  • helps you think about the Law of Demeter; components should have limited knowledge, and only talk to its friends
  • DOM as DSL was possible in Angular1, now conventional and encouraged

Lifecycle Hooks

  • goes back to the "always learning" principle; these look like React events. Explore other stuff to better understand

Template

  • ES6 template strings in code files
    • kind of React/JSX-y, bringing DOM to code
    • Pragmatic Principle: Refactor Early, Refactor Often
      • when you add a couple functions and elements to the same file to implement a requirement, becomes clear quickly if refactor is necessary

Metadata

  • Pragmatic Principle: Configure, don’t integrate
  • Stone Soup: dynamic component discovery through metadata and TypeScript

Service

  • the difference between a domain-driven design service and common Angular 1 usages
  • Angular2 encourages to a less-overloaded, more common definition of "service"

Hierarchical Dependency Injection

  • RestoreService in Tour of Heroes example is great Pragmatic application

Testing

  • Angular's Testing emphasis helps achieve Pragmatic Principle "Design to test"; don't ignore it

ES2015

In pragmatic fashion, take some ES2015 features and try to think of them in an Angular context. (Also TypeScript, since ES2015 == TypeScript in many cases)

Disclaimer most of these things are "Stone Soup"; I haven't tried them, they're just connections I've made while learning Angular2, ES2015, TypeScript, etc.

Default Argument Values

  • similar to metadata, emphasizes Pragmatic Principle: "Configure, don't integrate"

Let + Const

  • Nightmares: the first time you unexpectedly encounter variable hoisting in JavaScript
  • angular had polyfilled constants, so they must be a good thing, right?

Arrow Functions

  • var vm = this kinda controversial
  • arrow functions prevent .bind(this)-everywhere syndrome

Symbols

  • apps composed of components from many different teams in overlapping bounded contexts are bound to overlap. Use symbols to localize properties without crazy underscore/$ prefixes
  • also allows a kind of interface definition in language spec itself

Classes

  • interoperability! previously we had:
  • still important to understand prototypical inheritance
  • caution: don't start creating messy inheritance trees and gobs of state
    • worth noting Douglas Crockford's opinion: "I have been writing JavaScript for 14 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake." http://www.crockford.com/javascript/inheritance.html

Promises

Proxies

  • environment-specific data sources, similar to using H2 in a Java development environment
    • really hard in Angular1/Grunt or Gulp
      • pattern matching to include/exclude files from build

Destructuring

Collections

Sets

  • [] new Set(iterable)
    • convert an array to a set and eliminate duplicate values with a single line of native code
    • pass it a generator; run to completion and put yielded values into a set

WeakSets

  • avoids memory leaks caused by insufficient garbage cleanup; e.g. Angular1 event listener not cleaned up on $scope.$on('$destroy') would leak because callback would still be registered. A WeakSet could help avoid this problem.

Iterators

Generators

  • $q only kinda solves callback hell
  • asynchronous code is awesome; synchronous is easier to read

TypeScript

Moving Faster and More Confidently Through UI Development

Duck Typing, Type-Inference, or Structural Typing

Picks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment