* Titles subject to change
| React | Angular |
|---|---|
| 00 Introducing Advanced React Component Patterns | 00 Introducing Advanced Angular Component Patterns |
| 01 Build a Toggle Component (source) | 01 Build a Toggle Component (stackblitz) |
| 02 Write Compound Components (source) | [02 Write Compound Components](ht |
| <style id="jsbin-css"> | |
| .masonry-layout { | |
| column-count: 4; | |
| -webkit-column-count: 4; | |
| column-gap: 1 ; | |
| -webkit-column-gap: 1; | |
| } | |
| .masonry-layout__panel { | |
| break-inside: avoid; | |
| -webkit-column-break-inside: avoid; |
| // Flyweight.js - Copyright Addy Osmani, 2012. | |
| // Consider public domain | |
| // My implementation in JS of this: | |
| // http://en.wikipedia.org/wiki/Flyweight_pattern | |
| // Simulate pure virtual inheritance/'implement' keyword for JS | |
| Function.prototype.implementsFor = function (parentClassOrObject) { | |
| if (parentClassOrObject.constructor == Function) { | |
| // Normal Inheritance | |
| this.prototype = new parentClassOrObject; |
On an architectural level, the way we craft large-scale applications in JavaScript has changed in at least one fundamental way in the last four years. Once you remove the minutia of machinery bringing forth data-binding, immutable data-structures and virtual-DOM (all of which are interesting problem spaces) the one key concept that many devs seem to have organically converged on is composition. Composition is incredibly powerful, allowing us to stitch together reusable pieces of functionality to "compose" a larger application. Composition eschews in a mindset of things being good when they're modular, smaller and easier to test. Easier to reason with. Easier to distribute. Heck, just look at how well that works for Node.
Composition is one of the reasons we regularly talk about React "Components", "Ember.Component"s, Angular directives, Polymer elements and of course, straight-up Web Components. We may argue about the frameworks and libraries surrounding t
