Talks 2018

This talk will cover one of the open questions of modern development: when a pattern is a pattern? how do we reuse one in a slightly different use case? Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and rediscuss the way we approach componentisation

My day job is to design and architect projects at my workplace and soon I realized that there were many common modules required across projects and I always end up copy-pasting those modules to newer as well as existing projects over and over again.

This was tearing me down. Setting up the tools for a library seems to be such a basic task that you may be surprised that it has numerous nuances. In fact, even the authors of well-known libraries often don’t do this right, and there is no single exhaustive go-to source.

In this talk, I’ll get practical and demonstrate a dummy project to discuss the best library building practices.

Takeaway for the audience: 1. What are the different types of module systems. 2. What are different types of tool we can use (Webpack, Rollup, Babel) and How to configure these tools. 3. How to prevent the unused parts of the application from landing in clients’ applications by Tree Shaking. 4. When to use Babel. 5. When to use Bundlers. 6. How to manage the meta data for your libraries using the power of package.json. 7. What to publish to npm. 8. How to create an isomorphic library.

And when we sum up all the above points we will be able to build our own React UI Library the right way. :)

When starting out with a new project, people wonder what their stack should look like, what frameworks to use, what are best practices, etc. *That’s* exactly the problem we’re tackling with the GraphQL boilerplates we are building at Graphcool where Frontend can be React, React Native.

In this talk, we'll go through the journey of building a fully fledged Music Player using React Native. Given the player specifications, we were challenged to prove that React Native has no limits when it comes to build mobile applications, no matter how complex they are and having performance and cross-platform in mind. We’ll break down the player architecture, covering the different approaches to the problem (Declarative vs Imperative), as well as unveiling all the player elements in a top-down fashion, starting with the music service and the score visualisation and moving further along to smaller pieces such as time progress, progress bar, seeking and replay.

React’s sophisticated reconciler (aka the “Virtual DOM”) makes updates to the UI feel fast because it optimizes interactions with the DOM. As a result, we no longer have to worry about how to transition our UI from one state to the next. However, the reconciler is not a silver bullet; even the new Fiber Reconciler. Our React apps can still get sluggish, especially as they grow in size and data. Let’s discuss some causes for slow-downs and tools to diagnose problems so that we can speed up our apps.

Components are hot. Every view library or framework seems to be based on components these days. But when you write your React component you can't share it with an Angular developer. Your Vue components can't be used in Preact. The result: fragmentation. The cost: reinventing the wheel for every library.

We've had the answer for years, though. Web components are the standards based solution, but they've never seemed ready for the big time. Until now.

In this talk we'll look at why 2018 is finally the year of web components, the tools and libraries that we can use to build with web components and how you can get started building shareable, compatible, standards based components.

You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion.

Santa Claus, The Free Lunch, and JS Testing - All myths? We all know Testing is key, but it's not easy. What are your options, what exists, and what works? Let's talk about it all. What tools exist, and what matters in testing React and React Native.

It's time to leave the 2D world of a browser window and venture into the world of enhanced reality JavaScript applications. During the talk we'll see how to make great VR and AR experiences using just your browser and a bit of React, with live demos included, so we'll get to see them in action!

React's context API has always been labelled as experimental, but from the advent of Redux it has been used in all the most exciting react libraries. It's about to become a stabilised feature so now is the perfect time to learn the new context API. Combining the context API and render props gives you unprecedented power to cleanly reuse code across components. It even plays well with TypeScript and Flow. This talk will explain how context and render props work and give you some ideas of how to use them to simplify your own code.

In this talk, we're going deep on forms in React. I'll explore managing validation, error messages, and working with 3rd-party inputs and introduce you to Formik, a tiny form helper that lets you do all the fun stuff I just mentioned and more.

This talk will be mostly live coding. I'll start with the simplest input with just plain React. After discussing what's hard, I'll introduce Formik, gradually building a complex "invite friends" form with add/remove, autocomplete inputs, and human readable error messages--all in about 60-100 lines of code.

This past year, I released React Final Form, a next generation form library for React, based on everything I had learned from managing React's most popular form library, Redux Form. My talk will explain the decisions made in designing this new library as well as an explanation of how to build some common types of forms.

I work on React Navigation, one of the most widely used React Native packages and one that tackles a problem that is central to all apps - navigating between different screens. It sounds simple when phrased like that, but it is deceptively complicated when you get into the details. React Navigation works on web, iOS, and Android, and can be extended to work on any platform that React renders to. We'll talk about the design, show you how to extend it, discuss the challenges of mobile navigation, and compare React Navigation to related tools and examine the trade-offs.

CSS is hard !I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many tradeoffs one can do when choosing the better approach that a talk that will go over these options is more than necessary. Let's walk this road together and I promise it will all be fine and you will leave with an idea of which type of styling is better for each project. Hint: There is no perfect way ....

We all know how awesome React is and how functional patterns influenced its creation. But how can we make the most of it using purely functional programming!? What tricks/patterns can we use to make React even more functional? Come with me to Fantasy Land... the Lambdas are Awaiting!

Redux is a great library to manage application state. Updating a state synchronously is done with a pure function (a so called reducer) - which is easily testable and maintainable.

But unit testing reducers doesn't include: - async actions using a middleware - creating a redux store with middleware

Because there was no solution for that at that time, I developed chai-redux. A small chai extension which simplifies integration testing a redux store.

In my talk I will explain what a redux integration test needs to cover. And how chai-redux helps simplifying them significantly.

In this talk we are going to explore how to manage background tasks within your React Native application. Background tasks are essentially tasks that run when the app is not in the foreground (visible).

Full plan: 1. Introduction to the different components of an app: UI, backend… But in mobile also: Background, receivers, etc. 2. Introduction of background tasks in mobile 3. Example on how to play music on the background using React Native https://github.com/ferrannp/react-native-spotify-streamer (my public example) 4. Talk about pulling vs pushing system on mobile (to intro sync data on the background) 5. Example on how to fetch data on the background 6. Final example on how to run background tasks on JS after events like receivers or widgets on Android

Teams today are facing similar problems: How do we encourage the reuse of existing components? How do we raise awareness for them? How do we keep them stable while keeping maintenance efforts low? How do we ensure a coherent branding without exploiting our designers?

If you are worried by these questions fear no longer. I aim to show you a way out of this self-made jungle into a brighter world of coded style guides. We will explore together how we can tear down walls between design and development and how everyone can benefit from introducing living component directories into their project.

Building chrome extension is an area in which many of us are interested in and planning to do side project with investigating how to do it ... one day. Why do not do it using beloved React then? In my talk I will highlight most interesting parts in creating simple and useful chrome extension that will show at Chrome starting screen random explanation from Urban dictionary.

We come from a time where javascript was kept in different files, loading them in the right order in the html. Module loaders came to life, RequireJS and Browserify being the first of them. Webpack and Rollup followed them, which are truly amazing. But... have you ever configured them for a real-world app?

New tools started to appear tagged as zero-config tools: Parcel, Poi, Microbundle, Rollit... What's the deal with this zero-config trend?

This talk dives deep in this zero-config evolution, explaining its reasons and benefits.