Jared Williams jaredwilli

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

Sharing behaviour between React components

React 0.13 introduced using plain Javascript classes to create components, 0.14 introduced "stateless functional components" as another method of defining them. Neither of these have an in-built method for behaviour sharing such as we had with the mixins option passed to createClass. So now we get to review mixins as a pattern for behaviour sharing and, if necessary, come up with something better. If they're not all bad, we'll need to figure out how to, or even if we can, add them to the two new component definition options.

The problem

Dan Abromov's medium article from Mar 2015 makes the case for avoiding mixins.

For me (paraphrasing in the extreme), the key problems exposed are:

mixins can unintentionally hide / distribute the source of behaviour

React Component Lifecycle

getInitialState
getDefaultProps
componentWillMount
componentDidMount
shouldComponentUpdate (Update only)
componentWillUpdate (Update only)
componentWillReceiveProps (Update only)
render

	const logged = ComposedComponent => React.createClass({
	render() {
	console.log(`Rendering ${ComposedComponent.displayName}`);
	return <ComposedComponent ...{this.props} />
	}
	});

	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
	<style>
	#mapid{
	height: 480px;
	}

	#download {
	position:absolute;

	import Firebase from 'firebase';
	import React from 'react';
	import Config from '../../config/config';
	import Uploader from '../edit/Uploader';
	import { Status } from 'uxcore-uploadcore';
	import Safename from 'sanitize-filename';

	class FileUploader extends React.Component {

	constructor(props) {

	<?
	/////////////////////
	// slack2html
	// by @levelsio
	/////////////////////
	//
	/////////////////////
	// WHAT DOES THIS DO?
	/////////////////////
	//


	var Firebase = require('firebase');
	var rootRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");
	var archiveRef = rootRef.child('path/to/archive');
	var dataRef = rootRef.child('path/to/data');
	var archiveTimestamp = Date.now() - 3600; // everything older than an hour

	dataRef.orderByChild('<date field>').endAt(archiveTimestamp).once('value', function(snap) {
	snap.forEach(function(childSnap) {
	archiveRef.child( childSnap.key() ).set( childSnap.val(), function(err) {

	import { applyMiddleware, compose, createStore } from "redux"
	import { reduxReactIntl } from "redux-react-intl"
	import thunk from "redux-thunk"
	import rootReducer from "./reducers"

	const createStoreFactory = compose(
	applyMiddleware(thunk),
	reduxReactRouter({ routes, createHistory })
	)

	var a = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal"}, { value:"a63a6f77-c637-454e-abf2-dfb9b543af6c", display:"Ryan"}];
	var b = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer", $$hashKey:"008"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed", $$hashKey:"009"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi", $$hashKey:"00A"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal", $$hashKey:"00B"}];

	var onlyInFirst = function(equal, a, b){
	return a.filter(function(current){
	return b.filter(equal(current)).length == 0
	});
	}
	var onlyInFirstMyObject = onlyInFirst.bind(0, function equal(a){
	return function(b){