manigandham

Strictly Frameworks

• Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
• ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
• Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

mauvm

$ npm install --save babel-cli babel-preset-es2015
$ npm install --save-dev jasmine

.babelrc:

{
 "presets": ["es2015"]

jlongster

A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.

There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.

Libraries are sorted by github popularity.

Persistent Data Structures w/structural sharing

telekosmos

var uniqueArray = function(arrArg) {
  return arrArg.filter(function(elem, pos,arr) {
    return arr.indexOf(elem) == pos;
  });
};

var uniqEs6 = (arrArg) => {
  return arrArg.filter((elem, pos, arr) => {
    return arr.indexOf(elem) == pos;
  });

chocolateboy

// Groovy's Elvis operator
//
//     lhs ?: rhs
//
//  is equivalent to:
//
//     lhs == null ? rhs : lhs
//
// or:
//

sebmarkbage

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class

React Elements

allenwb

New ES6 Constructor Semantics and Usage Examples

Manual super: Alternative Design where subclass constructors do not automatically call superclass constructors

This Gist presents a new design of class-based object construction in ES6 that does not require use of the two-phase @@create protocol.

One of the characteristics of this proposal is that subclass constructors must explicitly super invoke their superclass's constructor if they wish to use the base class' object allocation and initialization logic.

An alternative version of this design automatically invokes the base constructor in most situations.

tunderdomb

if ( typeof document.currentScript == "undefined" && document.__defineGetter__ ) {
  document.__defineGetter__("currentScript", function (){
    try {
      throw new Error()
    }
    catch ( e ) {
      var qualifiedUrl = location.protocol + "//" + location.host
        , srcs = e.stack.match(new RegExp(qualifiedUrl + ".*?\\.js", 'g'))
        , src = srcs[srcs.length - 1]
        , absoluteUrl = src.replace(qualifiedUrl, "")

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

pfrazee

Communicating with Workers using HTTP

A design rationale.

See first: In-Application Sandboxing with Web Workers.

Web Workers interact with their Host Pages using a messaging channel (the postMessage API). Crucially for their programming model, the messages are asyncronous. This introduces a significant challenge for implementing Page APIs within a Worker – for instance, how do you port a GUI widget from the Page (where it can access the DOM) to a Worker, where it can only send async messages?

In my experience, two categories of solutions are suggested: use code-transformations to recreate Page-native APIs in the Worker, or introduce a new interface around messaging. In this gist, I'll explain why code transformations don't address the problem fully, and present a complete messaging solution based on HTTP.