DOM Framework Coupling, Migrating, and Leaky Abstractions - sgml/signature GitHub Wiki

Featuritis

Test Suites

UIKit

Flash to Haxe

Flash to Unity

React to Vue 2

Ember to Vue 2

Angular.js to Vue 2

jQuery to Vue 3

Vue 2 to Svelte

Polymer.js to Lit.js

Server-Side Rendering

Design Languages

Form Validation

jQuery

Angular

Reactive forms provide synchronous access to the data model, immutability with observable operators, and change tracking through observable streams.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Vue

Wherever something can be easily accomplished in plain JavaScript, Vue render functions do not provide a proprietary alternative. For example, in a template using v-if and v-for:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

This could be rewritten with JavaScript's if/else and map() in a render function:

props: ['items'],
render() {
  if (this.items.length) {
    return h('ul', this.items.map((item) => {
      return h('li', item.name)
    }))
  } else {
    return h('p', 'No items found.')
  }
}

In a template it can be useful to use a

v-model on a component was an equivalent of passing a value prop and emitting an input event

React

Use pass { capture: true } as the third argument to document.addEventListener:

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

Note how this strategy is more resilient overall — for example, it will probably fix existing bugs in your code that happen when e.stopPropagation() is called outside of a React event handler. In other words, event propagation in React 17 works closer to the regular DOM.

MobX

Animation

Polyglot Integration

JavaScript Migration

Binary Data

Framework Comparison

Leaky Abstractions

Vendor Specific Components

https://blogs.msdn.microsoft.com/partnercatalystteam/2015/06/19/optimizing-ember-and-ember-cli-on-windows/ https://engineering.linkedin.com/blog/2017/03/glimmer--blazing-fast-rendering-for-ember-js--part-1 https://engineering.linkedin.com/blog/2017/06/glimmer--blazing-fast-rendering-for-ember-js--part-2 https://engineering.linkedin.com/blog/2017/12/the-glimmer-binary-experience https://engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs https://engineering.salesforce.com/software-is-about-people-cf5b813e0f67 https://blog.heroku.com/future-of-emberjs

Canvas Abstractions

Vendor Specific CSS

Games

⚠️ **GitHub.com Fallback** ⚠️