I had the opportunity to attend React Day in New-York, here are some of my notes.

React Hooks Tips and Tricks

Donavon West - American Express

Hooks are included into React, it is also possible to create custom hooks. A lot already exist online and you should take the benefit of them:

• react-hooks-helper is a custom React Hooks library that gives you custom hooks for your code.
• Collection of React Hooks is another React Hooks library

useStep can be used to create a carousel.

use-dark-mode can be used to easily switch an app to the night mode.

Custom hooks can be used inside other custom hooks.

Be a React a11y: Making React applications work for everyone

Yuraima Estevez - The New York Times

Slides: a11y

Full Stack React in the Era of Serverless Computing

Nader Dabit - Amazon Web Services

Full-Stack Development in the Era of Serverless Computing

Talk regarding serverless technologies are changing what it means to be a full-stack developer.

Because of the rise of SPAs, more complex data concerns, multiple device targets and increased expectations of user experience, client-side development has gotten more complex over the past decade or so. Increased expectations for front-end developers.

Evolution of computing over the past few years:

• On Premises
• Cloud

• Serverless computing: FaaS (Function as a Service) + BaaS (Backend as a Service)

  • Serverless becomes easier
  • Serverless becomes cheaper than serverful
  • Serverful becoming relatively less important
  • Serverless becomes the default computing paradigm of the cloud era
• What's next? Serviceful Serverless Serviceful service - it is a new term that defined a set of services that do not require any server operations. No server operations Codeless - less code in your application because most of the code is managed by a third party. No need to manage uptime Scales seemlessly...

A few examples of serviceful services include Auth0 / Amazon Cognito(managed authentication), Algolia (managed search), Contentful (content infrastructure), AWS AppSync / Cloud Firestore (managed API services), Amazon Lex / Rekognition and Cloudinary (managed image & video hosting service).

Benefits

• Front end developers move further up the stack
• Increase developer efficiency and velocity
• Decreased complexity
• More secure, reliable, scalable

Team organized by feature rather than platform or stack.

A Field Guide To Architecting Complex SPAs in React

Phips Peter - Asana

Importance of TypeScript

Talking about performance and lazy loading - referred to the article idle until urgent.

Code split: one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.

CodeMod is a tool developed by Facebook to help with the refactor of large-scale codebases.

Building a typesafe and code split Redux store

Matthew Gerstman - Dropbox

Slides: Building a typesafe code split react-redux application

Code split : many small lazy loaded bundles Use React.lazy and Suspense - not yet available for server-side rendering

Code-Splitting

Discriminated Unions and TypeScript

Generics (typeScript stuff)

ReplaceReducer replaces the reducer currently used by the store to calculate the state. You might need this if your app implements code splitting, and you want to load some of the reducers dynamically.

As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state. The CombineReducer helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

Frontend performance from a designer’s perspective

Didrik Steen Hegna - Crystallize

Design vs performance

Importance of performance:

• Customers
• Google loves you
• Increase conversion

Google fonts: you can only fetch the characters you need using unicode-range subsetting.

Best format to add photos to a site is WebP - not supported by all browsers yet.

Optimize photos by defining the size and the source with different resolution depending on the screen.

Put media in source tag if you want display the picture differently.

<picture>
  <source
    sizes='50wm'
    srcSet='
      /static/.../... .webp 250w,
      /static/.../... .webp 384w
      /static/.../... .webp 512w
      /static/.../... .webp 1200w'
    type='image/webp'
  />
  <source
    sizes='50wm'
    srcSet='
      /static/.../... .jpg 250w,
      /static/.../... .jpg 384w
      /static/.../... .jpg 512w
      /static/.../... .jpg 1200w'
    type='image/jpg'
  />
  <img src='/static/.../... .jpg' alt='photo' />
</picture>

Loading images, consider lazy loading - it doesn't work on mobile yet

bundlephobia.com is a great tool to find the impact of bundles on your application.

To know how fast your page load, use Lighthouse, an automated tool for improving the quality of web pages.

Accessibility-flavored React components make your design system delicious!

Kathleen McMahon - O’Reilly Media

Slides: accessibility flavored React components make your design system delicious

https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

Testing into a better user experience

Ryan Burgess - Netflix

Importance of dealing with A/B testing. Don't rely on the HIPPO - Highest Paid Person's Opinion.

Some tools:

• Google Analytics Experiments
• Adobe target

I really enjoyed this conference and learned a lot. One thing I will particularly pay attention to is images and speed. Google Lighthouse is a tool I just started to use and that will definitely be a great aditiion to my toolbox for all my future projects.