Mark Funk mfunkie

Angular-UI - ui-router

Lately, I have been digging into the angular-ui-router, (https://github.com/angular-ui/ui-router), I would say from ng-conf, it is the recommended way to do routing in Angular. What I find interesting about it, is how you can have multiple views and your routing graph can be defined in your loosely coupled modules. This provides a very conventional way to assembling your angular.modules for an angularjs application. Instead of having several features in your controller and templates directory, you can have several repositories that just focus on a particular feature.

For example, if you have two CRUD modules, (projects and contacts), with ui-router you can keep each routing state independent of the other as long as they are unique.

So in one module projects, I can have a config section and create the following routing state:

angular.js('projects', [])

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.

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

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

Using emmet in jsx files
Emmet expands text when js autocomplete needed

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

React-Core Meeting Notes 2015-03-20

Note: This is the first time we're sharing meeting notes publicly. The primary reason we haven't shared these is because we often mix public discussions with matters that are Facebook specific and should not be public. We're really trying to be more open about our development process and what's happening inside the project so moving forward, we'll be sharing meeting notes. While most of us do work at Facebook, we're committed to this being an open project - for now we'll filter out the private notes from the public notes. Hopefully we can make it possible for these meetings to be open to any who wish to attend.

Attendees:

@zpao
@sebmarkbage
@spicyj
@jeffmo

	The MIT License (MIT)

	Copyright (c) 2014 Tomas Kafka

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	'use strict';

	/**
	* Adapted from https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
	* with the following additions:
	*
	* - Use BEM-ish modifiers (--enter, --enter--active, --leave, --leave--active)
	* - Work better with rAF batching strategy (see https://github.com/facebook/react/issues/2292)
	*
	* The CSSTransitionGroup component uses the 'transitionend' event, which

	[

	//
	// TABS (REGULAR)
	//

	// Tab set
	{
	"class": "tabset_control",
	"layer0.texture": "",

	var pureRender = (Component) => {
	Object.assign(Component.prototype, {
	shouldComponentUpdate (nextProps, nextState) {
	return !shallowEqual(this.props, nextProps) \|\|
	!shallowEqual(this.state, nextState);
	}
	});
	};

	module.exports = pureRender;