- React Router v4.0
- Maybe hot reloading with code splitting will finally work!
- Jest Snapshot Testing
- No more copying and pasting reducer output... 😊
- Code Splitting
- Get vendor.js bundle working
- Fix our splitting issues.
- Styled Components
- Seems like a no-brainer considering we're using css modules. Avoid the class altogether and go right to the component.
- syntax highlighter
- react-dates (airbnb)
- NO JQUERY!!!!
- Create style guide through components themselves. Render as individual components in an interact help page.
- React Storybook is an interesting option.
- zeit.co had a similar concept.
- react-motion
- Animation physics engine in the DOM.
- Prettier - you no longer need a linter. Stop yelling at your developers.
- Downside - no control over styles.
- Avoid network waterfalls
- Can we fetch the data immediatly on load of the APP, before React is even loaded?
- Can we cache certain API results and invalidate after the fact?
- best-effort invalidation. Get the current data from cache, then fetch and diff from the server.
- convert to
import('');
via syntax-dynamic-import- require.ensure is no longer necessary. We lose module names though... 👎
- splitting - consolidating common components between routes
- Slot and Fill for extensibility. (react-slot-fill)
Slot
- global extension pointFill
- fills aslot
- No flicker refresh. Click the browser refresh button and only the data changes... How?
- CDN Cache Control Immutable. Is this a standard yet?
- Avoid transpilation, source map generation, & bundling as much as possible during dev.
- Off thread JavaScript parsing and prefetching
- Pre-rendering (shell of application) is better to indicate progress.
- Animations. Things don't just pop up!
- Getting 60 frames per second is hard
- reliable, fast, engaging
- Very physical interactions
- Velocities changing with view transitions
- friction
- snap points
- fiber is all about removing jank and making applications appear faster.
- Roll back your tests to the language (make the language invalidate the need for tests: example - immutability built in)
Whatever your building, see if you can abstract it away 1 level deeper.
- roll back your blog to your library
- roll back your library to your framework
- roll back your framework to your language
- roll back your language to your os
- make your problems disappear
- Consistency in your UI builds user trust
- Keep up with teams you are training. Check in regularly.
- Cost of Maintaining vs Cost of Building. Sometimes it's better/cheeper to build new(sunk cost) sometimes it's better to maintain.
- Don't let the keyboard cover up inputs.
- Innovative interface designs (the web). We are no longer bound to what the platforms provide (win forms...).
- Relying on built in features is a bottleneck. You can hack it yourself.
- Testing: Hard process + Barriers to entry == < tests
- Web apps. Slow startup. Native apps. Slow adoption.
- Network
- Bundle Splitting (lazy loading)
- Cache last version
- Service workers (reuse artifacts)
- Bundle Splitting (lazy loading)
- P2P delivery
- Shared Distribution (CDN)
- Network
- Parse & Compile
- Butecode / Codegen cache
- AOT Compilation
- Heap Init
- Module Initialization
- Constant Folding
- Heap Snapshotting
- Module Initialization
- Render (DOM)
- Smarter Algorithms / APIs
- Optomizations to compilers
- I/O vs CPU (Fiber)
- Not a performance problem. This is a scheduling problem
- Chunk data and rendering by components.
- Streaming. Make every component async.
- Risk of Jank and re-layout. Too many loading states. Showing content as quickly as possible is not a good UX.
- Defer each section until it is done.
- Priority problem. More important to process user interaction over incoming data. Need to re-order
- Animations and gestures are the most important
- Taps and Clicks are next
- Last, Network and Timer.
- Last, Off screen / Hidden
- Scheduling is a core initiative of UI. Fiber is the solution (React 16)
- New reconciliation algorithm.
- Fiber is a datastructure
- Asnychronous updates.
- Reconciliation is interruptable
- Commit is not interruptable
- Work can be derurred (requestIdelCallback - react will polyfill)
- Streaming Rendering, Parallelizing rendering branches of the tree.
- Starvation. Low priority updates may never happen, React tries to re-use work to mitigate this problem.
- React Core team make this seem like an outstanding issue.
- componentWillUpdate and componentDidUpdate are no longer symetric.... Did this break anything?
- bit.ly/graphql-react
- graphfront
- graphfront-ui
- Push
- Live queries
- Stateful channel
- Know when data changes
- Reactive backends (challenging to integrate and scale)
- Subscriptions
- When pushed, we know why
- Not every change, only what we care about.
- Live queries
- Polling
- Simple, Stateless, intuitive
- Good solution when data changes at a known frequency.
- Good for prototyping, fallback solution.
- Questions:
- API Design: What does the client expect?
- Do we send the minimum amount of data? Pub/Sub?
- Do we send the same data to every subscriber?
- How do we avoid sending too little or too much data?
- GraphQL is Wish Drive Design.
- Design the data how you wish it was displayed.
- GraphiQL (GraphQL IDE - explore a GraphQL endpoint)
- AMP (server side rendering?)
- Instant Articles
- Fiber
- You mean my app won't just stop working... 😦
- React-pdf
- React-ART
- Double Buffering
- Cooperative Scheduling (firefox - project quantum)
- Route Masking (display links differently in the URL vs the Server)
- I personally don't like this idea...
- content-addressable build artifacts.
- apollo
- Fetch is a standard API... who knew..!
- "Tweening" animations...
- Declarative APIs
- expo.io
- .mtl files .obj files (blender exportable files)
- style jsx - Ahead of time Style Isolation via a Babel Transform
- Attempts to solve the global CSS injection problem.
- De-Dupes, Detaches, and Server Renders
- SERVER LESS
- serverless movement vimio
- react-sorcerer
- Sorcerer is a react component that builds a srcset for your img tags.
- react-select
- No JQUERY!!!
- react-icons
- react-notifications
- Victory charts
- victory-cli
- react-game kit
- matter-js
- react-music
- react-hardware
- webflow
- webvr
- jest-movie
- chakra timetravel debugging
- react-modal
- Interpupular Distance (Distance between the eyes)
- Stack
- WebGL
- three.js
- React.vr
- react-vr-cli
- WebVR (Experimental)
- WebGL
- "User's are finally inside our application."
- Beau Cronin (Hierarchy of needs in VR)
- Delight
- Usefulness
- Interpretability (presence)
- Comfort (presence)
- more then .5 less then 20 meters for best comfort
- font > 20px (pixels per degree ~10ppd)
- avoid simulation sickness