Forem: react-europe

Announcing ReactEurope 2021

react-europe — Thu, 23 Sep 2021 17:13:04 +0000

Our conference will take place online on December 9th (workshops) and 10th (talks)!

Both workshops and conference will be live streamed for free on youtube

1st speakers:
Nader Dabit aka @dabit3 (@thegraphprotocol), Daishi Kato (author of Jotai and many other open source projects) and
Sidhartha Chatterjee (core team at Gatsby). More cool speakers and workshops to be announced soon.

More info: https://www.react-europe.org/

CFP: https://checkout.eventlama.com/#/events/reacteurope-2021/cfp

All ReactEurope 2020 are now available online!

react-europe — Sun, 24 May 2020 17:43:18 +0000

That's it for this edition! You can check every single talk already on this youtube playlist and binge on them this weekend!

Thanks to everyone involved and make sure to check out all the cool projects including:

Thanks to all the speakers and instructors, make sure to follow them: Devon Govett, David McCabe, Ives van Hoorne, Tim Neutkens, Nader Dabit, Erik Rasmussen, Joshua Comeau, Michel Weststrate, Sanket Sahu, Lukonde Mwila, Tadeu Zagallo, Nicolas Dubien, Paul Henschel, John Adetutu, Richard Threlkeld, Alex Holachek, Evan Bacon, Siddhartha (Sid) Chattopadhyay, Christopher Chedeau, Brandon Bayer, Eric Samson, Eric S Bishard, Olivier Tassinari, Sebastien Lorber, Sibelius Seraphini, Eric Vicenti, Nik Graf, Wolfgang Goedel, Jon Samp and more!

Thanks again to all our speakers and sponsors and all involved, stay safe and have fun!

Announcing the ReactEurope Remote Hackathon 2020

react-europe — Thu, 14 May 2020 13:25:50 +0000

We're super excited to announce the ReactEurope Remote Hackathon 2020.

Because it is remote, we will be able to run it for a few days to let you write quality projects.

It will start on Sunday 17th May at 11am until Wednesday 20th 6pm Paris time (UTC+2).

Each participant will need to:

Register here https://bit.ly/RE2020HackathonRegistration
You can form teams of up to 3 or do it on your own
Create a react app that makes use of KendoUI or AWS Amplify (or both)
Create a repository on github
Provide a public a url to check a live demo
Send us the public url and repository url on a google form https://bit.ly/RE2020Hackathon
that's it! You can start coding right away! Nothing else needed.
The winner will demo at 6pm on the 20th of May on our Youtube channel on the 20th

We will pick a few finalists that will demo on our youtube channel and get a chance to win a free ticket for next year conference as well as a few extra prize from our sponsors Progress and AWS Amplify.

Please join our #hackathon channel on discord to participate!

https://bit.ly/re2020discord

The good folks from Progress Kendo React will be there to answer your questions.

Getting started with our community hangouts

react-europe — Tue, 18 Feb 2020 18:58:50 +0000

This year we received so many cool proposals to our call for papers that we had to add a second track on day 2 of the conference.

Even so, we felt that there were many other proposals to our call for papers that deserved a chance to present to a wide audience and this is why we invited them to present live on our youtube channel. First person to accept was Florian Rappl who talked to us about Microfrontends with React so if you've ever wondered what Microfrontends are all about and how would you make them work with react. Make sure to check the video below 👇👇

And in case you missed it, Sibelius Seraphini gave a very cool demo of Relay with Concurrent Mode last week you can watch below.

He will also be giving a workshop on the topic.

We will have many cool live streams with speakers coming to the conference and people who submitted talks to our call for papers, you can hit the subscribe button on our youtube channel to never miss a new live stream.

If you have a cool project you would like to demo on our youtube channel to our more than 17k subscribers, you can DM us on here or on twitter https://twitter.com/reacteurope

Announcing our live stream on Relay and Concurrent Mode with Sibelius Seraphini on 02/13

react-europe — Wed, 12 Feb 2020 17:05:45 +0000

📢 Some of our speakers will do cool demos live on our Youtube channel during the months leading to the conference.

First one will be @sseraphini on relay and Concurrent Mode live this 13th of February.

You can see the rest of our speakers here https://www.react-europe.org/#speakers

Make sure to subscribe or set a reminder 👇👇

ReactEurope 2020 schedule is up with a new discovery track and more!

react-europe — Tue, 04 Feb 2020 16:27:13 +0000

We're super excited to announce that our schedule for the 2020 edition is now available online. We will have the co-creator of GraphQL, CodeSandbox, Next.js, MaterialUI, react-spring, Amplify, BuilderX, Expo Web, Parcel.js and more!

Many thanks again to everyone who sent a proposal, they were of such high quality that we added a second Discovery track on day 2. ReactEurope will remain a single track on the first day, many of you always tell us that is something they like about the conference but we also have many people asking for more options so we think we found the right balance with a second track on the day 2 afternoon (should be extended to morning too soon).

Here are the great talks and speakers we will have, make sure to follow all the speakers too:

John Adetutu will give the keynote and be the conference MC. He wrote the react-spring hooks API and loves contributing to open source. He will talk about hooks, the state of React and more.
David McCabe will talk about "State Management for Today's React". David works on data visualization tools for performance and efficiency data at Facebook and will present an approach to state management that scales from a single component to highly complex apps. This boilerplate-free system makes it easy to support browser history and URLs and to manage asynchronous data dependencies, and works with modern React features.
Erik Rasmussen will talk about how Render Props are Not Dead. There is still some value that render props can provide that hooks cannot. This talk explores that use case so that you can learn to recognize the scenario and deploy render props intelligently.
Josh Comeau will talk about you to integrate 3D to your site and more.
Devon Govett will talk about building a design system with accessibility, internationalization, cross device (mouse/touch) support and themeability in mind.
Alex Holachek will talk about Building Mobile-Optimized Websites in React and going beyond Responsive Design.
Paul Henschel will talk about bringing WebGL to React with react-three-fiber.
Tim Neutkens will talk about the latest and future of Next.js
Lee Byron will talk about what's coming next to GraphQL
Evan Bacon will show us what you can do with Expo, React Native Web and more.
Michel Westsrate will tell us about Flipper: The Extensible DevTool Platform for React Native.
Satyajit Sahoo and Michał Osadnik will be showing us how to do Cross-platform routing in React Navigation
Ives van Hoorne will talk CodeSandbox.
David Bismut, maintainer of react-use-gesture will show us How to integrate react-spring in your site for a slick experience.
Omri Bruchim will show us how to do React Native at scale.
Sanket Sahu will talk nocode and Building a Design Tool for React in React
Jan Kleinert will explain how Kubernetes works using React and music!
Nicolas DUBIEN, the author of fast-check, will show us how to detect the unexpected in React applications.
Chris Sauve from Shopify will show us how to do React on Workers
Tadeu Zagallo from Apple will talk about JavaScript ∩ WebAssembly.
Korotaev Alexander will talk Gamedev on React + WebGL
Lukonde Mwila will show us how to do React Hooks By Building An Auth Based To Do App
Richard Threlkeld, lead-team at Amplify will talk Data sync for realtime or offline apps with React and GraphQL
Shruti Kapoor will talk VR and React
Sidhartha Chatterjee, core-team member at Gatsby will talk Gatsby's roadmap and its future
Olivier Tassinari, MaterialUI V1 co-creator will talk about to build complex components for MaterialUI

Charly Poly will be MC'ing the discovery track and Gerard Sans will help host our round tables sessions (more info on this later).

That's it for now!

We are happy to be able to accept more talks this year thanks to the bigger venue. We will also have lightning talks and a few more surprises to announce soon.

Make sure to get your ticket here if you haven't already.

Cheers and see you all soon!

Which React Form Library Should You Use in Your App in 2020?

react-europe — Fri, 22 Nov 2019 10:54:47 +0000

A few days ago we posted a poll on our ReactEurope twitter asking people which form libraries they would use if they were to start a new project.
The results unsurprisingly reflected npm download stats with formik ahead but what npm numbers don't show is that almost as many users do not use any library at all and just rely on react hooks and lifecycle functions.

// Detect dark theme var iframe = document.getElementById('tweet-1196160911985324040-297'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1196160911985324040&theme=dark" }

formik is the dominant one, it relies on react to manage forms while final-form can be used without it and makes use of subscriptions, it is also about half the size. Both formik and final-form users answered they were very happy with both so feel free to pick whichever, formik is bigger (14.7KB) compared to final-form (7.6KB) but formik has great support for react native and some cool features like managing low priority updates using react’s scheduler.

react-hook-form is also pretty neat, as its name indicates it was built post React hooks release and is really optimized for them and written in TypeScript, it will also make you write a little less code than the other two libraries especially for validation which is always a good thing. It also has benchmarks on its site showing it more performant than the competition though you always need to take these with a grain of salt. However, it is still new and some of its design decisions make it incompatible with a popular library such as MaterialUI (though there are workarounds being worked on).

There is also react-form which was also written with hooks in mind and support all the features you would expect from a form library including cool memoization for frequent and fast rerenders. It is also ridiculously small with just 4.5KB!

These 4 libs would be the main big ones however there are a few cool extra ones that deserve a mention:

unform which has amazing support for uncontrolled form structures.

react-jsonschema-form if you need dynamic form generation, this library will generate a form for you using json, no need to write any code.

frontier-forms also generates forms for you but based on your GraphQL mutations. That is to say, you just pass it a mutation query and it generates a form for you which is pretty cool. And because it makes use of final-form you get all the form state management and validation on top. You can watch a demo of it here from last year’s edition.

All that being said, the elephant in the room here is that close to 40% of respondents said they did not use any library and David Piano who wrote the great xstate state machine lib and sceptic of such form libraries suggested just using useReducer and useEffect instead which is similar to how it’s done in ReasonML.

// Detect dark theme var iframe = document.getElementById('tweet-1196224209359450112-378'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1196224209359450112&theme=dark" }

If you’re not familiar with either useReducer or ReasonML, think of it as a local redux for your form, in other words, a reducer to which you can dispatch actions triggered by your form.

You can see some nice examples of using useReducer here, here and there.

However, people were quick to ask David how would we deal with the other issues that form libraries take care of such as validation, errors and more.

// Detect dark theme var iframe = document.getElementById('tweet-1196228691585617920-920'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1196228691585617920&theme=dark" }

There doesn’t seem to be a concentius on that part for now.

Conclusion:

If you want to play it safe, go with one of the big four mentioned above, they cover more than 90% of use cases and offer a great DX. If you’re feeling a bit adventurous, you can try one of the extra ones mentioned.

If your forms get very complex, you may regret picking a library and wish you followed David’s advice by just using useReducer. However, most people are happy using these libraries even on big projects as people reported in our original twitter thread.

If you want to learn more about this topic we’re happy to say that Erik Rasmussen, the author of final-form will do a workshop that will teach you how to build modern forms in the three main ways mentioned above:

by just using useState
by using useReducer and useEffect
by using a library that smooths the process of dealing with validation, errors and more.

How about you? Feel free to comment which is your prefered way. By the way, if you’re in the process of writing your own form library that you think would bring the best of both worlds (useReducer+validation etc) or even something different and you want to show it at the conference, feel free to send us a proposal on our call for paper, we’d love to read about it!

Build Great User Experiences with Concurrent Mode and Suspense with Our New Relay Workshop with Sibelius Seraphini!

react-europe — Thu, 14 Nov 2019 14:52:54 +0000

We’re super excited that Sibelius Seraphini, one of the most proficient open source contributor in the community, will be giving a workshop on Relay.js with all the latest bells and whistles on the 16th of May.

If like us, you religiously watched the latest presentations on how the React, Relay and Facebook webcore team cooperated to build the new Facebook F5 and if you’ve been wanting to build the same optimizations that come with concurrent mode into your own apps, then this workshop is for you!

Here are some of the points you will learn:

Best Practices for Suspense
Load Data Incrementally: Dynamically loading code and using fragments for your components
Render As You Fetch pattern via the preloadQuery() and usePreloadedQuery()
Using useTransition to make route transitions more seamless
usePaginationFragment for colocation of data-dependencies with the view and pagination
using the relay compiler to take advantage of TypeScript types with GraphQL types

You’ll learn how to put all these techniques together to bring the best experience possible to your users.

And if it gets released by May, we’ll also include the new SSR API and more.

While Relay has had a reputation of being a bit more complex than other GraphQL clients alternatives, it's been way more simple and flexible since the Relay Modern release and Sibelius is a really passionate early user of it and he will make a great job of explaining it to you. Relay also remains unmatched when it comes to optimizations, cache management, concurrent mode and more.

Good knowledge of React and beginner in TypeScript and GraphQL are required.

Get your ticket here https://www.react-europe.org/#tickets

Also in case you missed it, we have six other workshops to choose from about React.js, React Native, GraphQL, Next.js, Gatsby, Forms and more*.*

Looking forward to see you there!

-the ReactEurope team

PS: if you would like to sponsor the conference, get in touch with us at reacteurope@eventlama.com

New Workshop: TypeScript for React (and GraphQL!) Devs with Michel Weststrate

react-europe — Wed, 13 Nov 2019 11:15:31 +0000

The React community is moving to TypeScript fast & it can be hard to keep up. What better way to learn about both TypeScript & how to migrate a React app to it than with none other than @mweststrate who wrote MobX in TypeScript?

GraphQL is also taking over the world and has typing included, however, it’s a pity that you often have to define your typing twice, once in your GraphQL backend and then again on the client. Michel will show you how to make this process easier during the workshop.

You can get your ticket and more info here https://www.react-europe.org/

This workshop will get you up and running with the basic and more advanced patterns of TypeScript. TypeScript has some powerful features, that fit very well with the dynamic nature of the JavaScript language. In this workshop we will cover all the essentials and some of the unique features of TypeScript.

But beyond that, this is a workshop for React devs! To practice the theory, during the hands-on parts of this workshop we will be migrating an application from plain JavaScript to TypeScript.

Michel Weststrate has been working with TypeScript full-time for the last 3 years. He authored several open source libraries (such as MobX and MobX-state-tree) that are written in TypeScript and leverage some of it’s finest features.

Get your ticket here https://www.react-europe.org/#tickets

Also in case you missed it, we have six other workshops to choose from about React.js, React Native, GraphQL, Next.js, Gatsby, Forms and more.

Cheers and see you soon,

-the ReactEurope team

PS: if you would like to sponsor the conference, get in touch with us at reacteurope@eventlama.com

Announcing our new Gatsby Workshop

react-europe — Tue, 12 Nov 2019 12:38:22 +0000

We’re pumped to announce our first Gatsby workshop on the 12th of May at ReactEurope that will be given by the good folks from the Gatsby team itself including Madalyn Parker and Josh Comeau.

Gatsby is a very versatile tool that allows you to do many things with it to display and manage your content but also build actual dynamic apps so we are very excited about the outline we came up with that will enable you to build powerful apps with it:

Getting started with Gatsby
CSS and layout
Querying data with GraphQL, working with CMS’ like Contentful or Wordpress
Routing, creating pages programmatically
Accessibility
Animations and interactions
Authentication, having protected routes
Leveraging the Gatsby Ecosystem with starters, plugins, and themes
Deployment and profiling

We’ll refine the outline with time but this should give you a good idea already.

Looking forward to seeing you all there.

We also have 5 other workshops on React.js, Next.js, Forms, GraphQL, React Native and more.

Cheers and see you soon,

-the ReactEurope team

PS: if you would like to sponsor the conference, get in touch with us at reacteurope@eventlama.com

Next.js workshop with the core team and ReactEurope CFP

react-europe — Mon, 04 Nov 2019 20:07:48 +0000

📢 A few exciting news 🔥🔥🔥

our call for paper will open next Monday
the core team of Next.js from Zeit will be giving a workshop at the conference
the core team of React Navigation will be part of the React Native workshop and will also give a talk on the upcoming version of React Navigation

Find out more about our current speakers and workshops below 👇

https://www.react-europe.org/#speakers