(by @andrestaltz)
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.
(by @andrestaltz)
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.
Author: Chris Lattner
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ nano ~/.zshrc
path=('/path/to/depot_tools' $path)
This document will help you generate flamegraphs for your node processes on OS X.
You can read about the various types of flamegraphs and how they are useful
in Brendan Gregg's wonderful write up here.
By the end of this document, you should have a flamegraph for you node app to play with.
var webpack = require('webpack'); | |
var MemoryFS = require('memory-fs'); | |
var SingleEntryDependency = require('webpack/lib/dependencies/SingleEntryDependency'); | |
var fs = new MemoryFS(); | |
fs.mkdirpSync('/src'); | |
fs.writeFileSync('/src/app.js', 'require("./dep.js")', 'utf-8'); | |
fs.writeFileSync('/src/dep.js', 'module.exports = function(msg){console.log(msg)}', 'utf-8'); | |
fs.writeFileSync('/src/extra-entry.js', 'require("./dep.js")', 'utf-8'); |
In React's terminology, there are five core types that are important to distinguish:
React Elements
@tracked
is a decorator for Preact that makes working with state values no different than properties on your component instance.
It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.
tracked
has no dependencies and works with any component implementation that uses this.state
and this.setState()
.
import fs from 'fs'; | |
import path from 'path'; | |
import babel from 'rollup-plugin-babel'; | |
import commonjs from 'rollup-plugin-commonjs'; | |
import nodeResolve from 'rollup-plugin-node-resolve'; | |
import typescript from 'rollup-plugin-typescript'; | |
import replace from 'rollup-plugin-replace'; | |
function findVersion(file, extensions) { | |
for (let e of extensions) { |
/** | |
* The examples provided by Facebook are for non-commercial testing and | |
* evaluation purposes only. | |
* | |
* Facebook reserves all rights not expressly granted. | |
* | |
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS | |
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL | |
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN |
<script> | |
window.Promise || document.write('<script src="https://unpkg.com/es6-promise@3.2.1/dist/es6-promise.min.js"><\/script>'); | |
window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch@1.0.0/fetch.js"><\/script>'); | |
</script> |