The spec has moved to a repo: https://github.com/defunctzombie/package-browser-field-spec to facilitate collaboration.
# A class for controlling history state | |
# | |
# The aim of this class is to provide ways of pushing and | |
# replacing state by providing an action alongside a state. | |
# This approach differs from routing based solutions that | |
# provide functionality to make and detect state changes then | |
# handle them elsewhere. | |
# | |
# $button = $('.button') | |
# |
(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.
This is a draft list of what we're thinking about measuring in Etsy's native apps.
Currently we're looking at how to measure these things with Espresso and Kif (or if each metric is even possible to measure in an automated way). We'd like to build internal dashboards and alerts around regressions in these metrics using automated tests. In the future, we'll want to measure most of these things with RUM too.
- App launch time - how long does it take between tapping the icon and being able to interact with the app?
- Time to complete critical flows - using automated testing, how long does it take a user to finish the checkout flow, etc.?
- Battery usage, including radio usage and GPS usage
- Peak memory allocation
Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.
Instead, with this approch, your app's current pathname
is just another piece of state, just like anything else.
This also means that when doing server-side rendering of a redux app, you can just do:
var app = require('your/redux/app')
var React = require('react')
// give it a name so it reuses the same window | |
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no"); | |
// reload in case it's reusing the same window with the old content | |
win.location.reload(); | |
// wait a little bit for it to reload, then render | |
setTimeout(function() { | |
React.render( | |
<DebugPanel top right bottom left > |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent