timkindberg

A New Portable API Object

What if we could construct an object that described everything about the fetch and query all together in a single object. And that object could be ultra-portable, able to be passed to any sort of functions such as:

• useQuery(<new api object>) - declarative hook-fetched data
• fetchQuery(<new api object>) - imperative method-fetched data
• prefetchQuery(<new api object>) - imperative method-fetched data for SSR cache
• invalidateQuery(<new api object>) - invalidate the api's cache key
• mockApiResponse(<new api object>) - mock the api for a test

timkindberg

// ==UserScript==
// @name         Minimal JSBin
// @namespace    http://egghead.io/
// @version      0.1
// @description  Hide distractions in jsbin to help learners focus on taught content
// @author       Tim Kindberg
// @include      https://jsbin.com*
// @grant        none
// ==/UserScript==

timkindberg

import { Component, bundle } from 'ng-forward';
import { ComponentA } from './component-a';
import { ComponentB } from './component-b';

@Component({
  selector: 'app',
  directives: [ ComponentA, ComponentB ]
})
export class App { }

timkindberg

Angular 2

A balance of power and simplicity.

Developed by True Stewards:

• Angular 2 is a careful, methodical reinvention of a mature, comprehensive framework.
• Transparent and take community feedback and contributions.
• Google
• Performance driven development.
• Embraces web standards and web-component-friendly.

timkindberg

;(function($){
  var alreadySupported = 'placeholder' in document.createElement('input');

  function doPlaceholder(){
    if(alreadySupported) return;
    var $this = $(this);
    if($this.data('placeholder-polyfill'))return;
    $this.data('placeholder-polyfill', true);
    if(!$this.is('[type="text"], [type="password"], [type="email"], textarea')) return;
    $this.wrap('<span style="position:relative" />');

timkindberg

import {Component, bootstrap} from 'angular2/angular2';
import {Tabs} from "./Tabs";
import {Tab} from "./Tab";

@Component({
    selector: 'hello-app',
    directives: [Tabs, Tab],
    template: `
            // Doesn't work
            <div tabs>

timkindberg

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
(function (global){
"use strict";

_dereq_(188);

_dereq_(189);

if (global._babelPolyfill) {
  throw new Error("only one instance of babel/polyfill is allowed");

timkindberg

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
(function (global){
"use strict";

_dereq_(180);

_dereq_(181);

if (global._babelPolyfill) {
  throw new Error("only one instance of babel/polyfill is allowed");

timkindberg

import { bundle } from 'ng-forward';
import { ComponentA } from './component-a';

// We can create a bundled module from ComponentA
// You can then reference that module elsewhere for
// non-converted components and services
bundle('app', ComponentA);

timkindberg

import { bundle } from 'ng-forward';
import { ComponentA } from './component-a';

// We can create a bundled module from ComponentA
// You can then reference that module elsewhere for
// non-converted components and services
bundle('app', ComponentA);