React Amsterdam Conference 2019 7 months ago

We touched the ground on Amsterdam Airport Schiphol on time. It will take me from the biggest airport in the Netherlands about 40 Minutes to get to north of the city, to De Kromhouthal where the React Amsterdam Conference 2019 takes place and I am all excited about it.

A special React Amsterdam ferry with a green flag with 4th edition React Amsterdam Conference logo was inviting for cruising right behind the Amsterdam Central Station, which looked lovely. It is a full-day, a two-track conference on all things React, gathering Front-end and Full-stack developers across the globe in the tech heart of Europe.

React Amsterdam Conference 2019 is React that rocks and spring in Amsterdam that blossoms. De Kromhouthal welcomed most notable community members and OS contributors in Amsterdam to share knowledge about all things React, including Native, GraphQL, Testing, ReasonML, and Design Systems.

The breakfast was prepared at 8, right after the registration and the crowd of over 150 people freshened up, Kent C. Dodds started to explain why is React such a brilliant JavaScript library for building simple and complex user interfaces and did in total two workshops. The word was given to Siddharth Kshetrapal, who talked about the component pattern that will make every codebase better in which use case.

Mark Dalgleish continued after the coffee break about design systems as a way of standardizing our respective design languages into reusable components. And the day went on with Andrey Okonetchnikov who hosted with Artem Sapegin a workshop on Design Systems for React Developers, showcasing how to design systems offer a systematic approach to the process of product creation.

Max Stoiber, Max Gallo, Elizabeth Oliveira, Peggy Rays and Ashi Krishnan came one after another and enlightened the conference. The first day was a blast of ideas, best practices, and examples of how React can be a great tool to improve user experience without a hassle.

An interesting lesson was about Microfrontends. The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016 and it extends the concepts of micro services to the frontend world. Splitting frontend into set self-sustainable SPAs allows reduce overheat from the team communication. Small frontend teams work on their part independently.

The idea of microfrontens is similar to to the idea of microcervices. Splitting frontend into set self-sustainable SPAs allows reduce overheat from the team communication. Small frontend teams work on their part independently.

Examples:

Spotify: Spotify desktop App is a collection of iframes maintained by separate teams

Zalando: Zalando devides pages into blocks, which are developed independently.

DAZN practice:

Frontends stored next to each other. They use an index routing they call “Bootstrap”, which is loaded first and displays simple animation, while under the hood an appropriate frontend is loaded based on some user specific info. Bootstrap is written in Vanilla JS.

Code is not shared between the teams. Costs of duplication are compensated by independence and autonomy teams get.

The next interesting thing was GraphQL. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

The tools to use are Sangria – Scala GraphQL Implementation and a Prisma hosted database service and prisma/graphql-yoga.

Here are the concepts.

State management shifted. No store. Fully typed.

Gives GUI to explore the API (can be disabled in prod): + self-documented code.

Schemas have JSON like syntax.

Everything in a schema must be in resolvers. 1 to 1 mapping.

Supports custom types, similar to TS, but less typing tools.

me query – convention: good naming to return logged user.

Query | Mutation | Subscription – reserved types.

Nested resolvers return type specific fields.

Schema can be generated from the typescript types! Woohoo!

Server side is a combination of the schemas and resolvers. Resolvers perform db manipulations + can preprocess data if needed. → Allows to shift burden of data manipulation from the client to the server side.

The client.

graphql-request → a lightweight GraphQL client

// Query example

export const AllPlanets = `
  query allPlanets($first: Int) {
    allPlanets(first: $first){
      planets{
        name
        id
      }
    }
  }
`;

Apollo client

Caches requests query: result. Cache can be dumped into the LocalStorage for better performance.

If hooks are used in the app react-apollo-hooks are a better choice.

For more info check trojanowski/react-apollo-hooks

 

The workshops were fabulous and the crowd could participate and learn about valuable fundamentals, principles, and patterns. Everyone enjoyed the well organized and executed React conference. The speakers demonstrated how passionate they are about React and I loved the workshops, soaked in the compact knowledge and got some valuable insights on new concepts of the React community.

#react #frontend #ai #ml #technology #dataprep #javascript #reactamsterdam


Check out the open positions at Onedot here: 


READ MORE > onedot/blog   > onedot/minutes

No Replies on React Amsterdam Conference 2019

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>