International single-track and two-day conference covering all about JavaScript and modern web technologies. 

Learn the best practices and case studies from different developer tools, new frameworks, platforms and techniques across the Web stack. Bring fresh ideas back to your business. The perfect conference retreat for passionate developer teams. 

JSCamp

2021

The international React.js conference in Spain. Join our international conference about React and React Native in one of the sunniest cities in Europe.

NOTE: The audio quality in most talks of this event is not good.

React Alicante

React 16.8 introduced hooks, a concept that will change the way we write React components and apps. 

This talk will walk you through the refactoring of an existing React app with hooks: we will go through the theory as well as seeing the available hooks in a real world scenario.

Refactoring off the hook(s)

The TypeSystem is our friend when coding, and it saves us from innumerable hidden bugs. When we encounter functions with a very dynamic nature, our types may not be enough, and we end up having to perform countless casts by hand, introducing human errors.

Can we improve our types? Can we teach the compiler how our data structures behave at type level? In this talk we will see together what type-level programming is, and how to introduce it in our codebase helps us to reach more exact type definitions, thus reducing the bugs in our code. Starting from a practical example we will see the basic patterns, limits and potential.

Type-level Programming ƒun in TypeScript

With react we have a lot of freedom when it comes to choose our tools. We make a pick based on developer experience, rating on github ;), performance. 

I would like to talk a little bit about how different ways of applying CSS to our code (css classes,
inline styles, css-in-js) impact browser behaviour. Lets deep dive into DOM and CSSOM building processes and actually check it out.

CSS. Under the hood.

While most of the world is excited about all the newest and coolest technologies you’re stuck maintaining a legacy application. It’s not glamorous, but it works and pays the bills. What if you could have the best of both worlds? Keep your legacy application and use the latest and greatest tools?

This dream can be your reality. I’m here to share some of the techniques, ideas, and code I’ve used to make this dream come true. While the task may seem daunting, if you come to this talk you’ll learn strategies you can use to slowly migrate your legacy application to become evergreen.

Evergreen Legacy pplications

In Product Hunt we have been using React for more than 4 years. In this talk, I'm going to showcase what is our React architecture. What we learned among the way. 

Topics includes will be designing reusable React components, GraphQL, routing, application
lifecycle, optimizing for SEO.

React architecture in Product Hunt

How I built a live transport map for my hometown

React and Auth0 working together to get more secure apps

Optimising React TTI

Tracking promises or how to avoid showing infinite loading indicators

Voice is the next frontier for input on (mobile) devices and the web. You can use it for inputting text instead of a keyboard but better use it to do actions on your mobile or website. This can be opening a task or screen in your app or even process it with NLP (natural language processing) to get the users intention and create a magical experience.

In this talk you will see how to get voice input ready in React and React Native, how to react on voice input and how to process it to get the intent from the user voice.

Giving voice an action in React and React Native

Every day we write a hundred, thousand lines of code to build products in the aim of impacting the lives of people in a positive way. But how can we make sure that the key features the user uses do not stop working with every new deployment? How can we get confidence that when refactoring code the existing feature still works as expected?

This talk I am going to share with you my experience of dealing with these in React Native by moving towards TDD. Also how writing unit and e2e tests helped me write better code and build beautiful apps.

Testing in React Native: Unit & E2E

"Micro Frontends" is the new buzzword in the Frontend world, but too many times people use it in the wrong context or with different things in mind.

Micro Frontends can refer to different kinds of solutions that solve different types of problems - starting from using different UI frameworks on the same app or letting different teams work on separate parts of the code independently.

In this session, we'll go over the different problems we have when building a big app and how different micro-frontends solutions can help with this. 

Micro Frontends - You Keep Using That Word, I Don’t Think It Means What You Think

When it comes to UX, one size doesn't fit all. What if you could predict user behavior and create custom-tailored, smart UIs? 

In this talk, we will explore how we can make adaptive and intelligent user interfaces that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time. 

With predictive analytics, probability-driven statecharts, decision trees, reinforcement learning and more, UIs can be developed in such a way that it automatically adapts to the user's behavior.

Mind-Reading with Adaptive and Intelligent User Interfaces

Rendering is not a common performance bottleneck in React applications. It’s more about large bundle sizes or slow network requests. At the same time rendering problems can be challenging to discover and mitigate. So when user experience gradually becomes more and more janky most of us just use an old-school debugging technique “comment out this line of code, refresh and see if something changed”. This is not optimal and there are better approaches to performance profiling.

We are going to use Chrome Perfomance Tab and new React DevTools Profiler plugin to profile a real application. We will learn how to use these tools to identify rendering problems and make user experience really smooth. We are going to explore different React optimization techniques that allow us to avoid unnecessary rerenders or doing heavy computations on every render (memo, useMemo, useCallback).

We are also going to touch how experimental Profiler component can be used to collect timing information and measure the "cost" of rendering.

Profiling React rendering performance

Design systems are popping up in all companies to help developers build interfaces faster while staying consistent with the design of the product. It might happen that your company has one, but your teams are not using it or they are stuck in an old version of it.

Not all design system codebases are created in the ideal context and conditions. I’m going to show you how in Typeform we are battling tech debt, building straight forward processes and infrastructure, to help our teams move forward as our design system evolves.

Paving the adoption path of your Design System for engineers

How do you know your feature is working perfectly in production? And if something breaks in production, how will you know? Will you wait for a user to report it to you? What do you do when your staging test results do not reflect current production behavior? 

In order to test proactively as opposed to reactively, test in production! By testing in production, you will have increased accuracy of test results, your tests will run faster due to elimination of mock and bad data, and you will have higher confidence before releases. You can accomplish this through feature flagging, continuous delivery, and data cleanup. Only when your end-to-end tests pass in production will you know that your features are truly working. 

I will show you how to mitigate risk, improve your understanding of the steps to get there, and shift your company’s testing culture to provide the best possible experience to your users. I will talk about the way to run tests in the production environment of a system, how to do it without disrupting real end users, and how to exclude testing data from data and analytics. 

I will also talk about the tools that help in this process, the benefits of testing in production and why the pros outweigh the cons, over doing it in staging or other testing environments, why its more reliable, and sometimes even easier.

Testing in Production

Those examples about how to customize the theme of your app or that toggle component sample are fine to see the basic use case of new React patterns and features, but they are not enough to see how powerful these techniques are. 

In this talk we will see in depth how to put together most of the recent React advanced patterns and features (Compound Components, High-Order Components, State Initializers, Context API, Refs and -of course- Hooks!) to solve complex real-world problems in a simple, yet elegant way, including proper automated tests for them.

Resolving real-world problems by mixing several advanced React patterns and features

React Native, your UX superhero

Using React with JAMstack

Compiling GraphQL to Blazing Fast JS

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. 

These are concepts, issues and roadblocks that a developer would encounter in their journey of integrating React Native in a brownfield app.

Knowing these ahead of time would help folks take the right decisions when building their own React Native infrastructure.

React Native at Skyscanner: The Good Parts

There are cases when product has a lot of business logic and wants to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native. 

Shareable code adds development speed, simplified communication between teams, removes behavior differences between web and mobile. 

At the same time there are a lot of things which can increase a solution complexity and add some limits to the final product.

Monorepo: React Web & React Native

At Threads we needed to add video editing to our mobile web app, including advanced overlays and filters. We thought there would be an open source project we could use as a foundation, but it turned out that every project we tried was either far too slow, or had a fraction of the feature set we needed.

By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos.

In this talk, I'll take you through our approach, and why we arrived at the method we chose. You'll see some of the techniques that were required to scale our canvas solution, both managing the growing complexity, and keeping a lid on our memory usage.

This talk will be especially useful to anyone considering building high performance graphics for the browser, but it will also give any developer some new ideas about how to approach technical challenges.

High performance video editing for the mobile web

2019

A 3-day, single track conference with a workshops day about topics ranging from GraphQL, WebAssembly, the JAMStack & Progressive User Interfaces to HTTP/3, Automation Testing, Serverless and the P2P web.

No matter if you consider yourself a backend, frontend developer, or anywhere in-between, Full Stack Fest is for you.

Full Stack Fest

Here's what happened in Full Stack Fest 2019.

Full Stack Fest 2019 Highlights

The mental model for building for the web largely hasn’t changed in the last 20 years, but we’ve incorporated complexity, richness, grown our community a thousand fold, and scaled to billions.

The mental model for building for the web largely hasn’t changed in the last 20 years, but we’ve incorporated complexity, richness, grown our community a thousand fold, and scaled to billions. This year the web turns 30, and we look back at the steady march forward of better abstractions, better syntax, and better mental models that brought us here.

We're gunna program like it's 1999

The developer tools that we like and why we like them, any maybe how to think about writing more.

TBA: Developer experience stuff?

The JAMStack is empowering the Microservice and distributed architectures in ways that we had not previously conceived.

The JAMStack is empowering the Microservice and distributed architectures in ways that we had not previously conceived. 

Join Brian in walking through how you can leverage this new tool in creating action packed workflows to supercharge your repos on GitHub by building your containers to run arbitrary code, publish packages to registries, and even automate welcoming new users to your projects.

Spreading the JAM throughout your CI workflow

In this talk, Yan will discuss the strategies he employed in migrating a social network, Yubl, from a monolith to serverless.

In this talk, Yan will discuss the strategies he employed in migrating a social network, Yubl, from a monolith to serverless: How to identify service boundaries, and migrate features off the monolith without downtime, implementing search, user recommendation, news feeds, push notifications, business intelligence and so on.

How to build a social network entirely on serverless

This talk is a practical one, chock-full of tips for creating more accessible front-end foundations.

This talk is a practical one, chock-full of tips for creating more accessible front-end foundations. If writing HTML, CSS, SVG and JavaScript is part of your job, then this talk is for you.

In this session — a series of macro case studies from real client projects — Sara shares some frustrations, many lessons learned, and a lot of practical tips and tricks for building accessible front-end foundations that you can take and apply in your own projects right away.

Applied Accessibility: Practical Tips for Building More Accessible Front-Ends

CSS Houdini is one of the most exciting and powerful advancements in web styling. This talk examines how we can use it today in a progressively enhanced manner to power-up our UI's.

CSS Houdini is one of the most exciting and powerful advancements in web styling. It allows developers to access the CSS Object Model for the first time(!) and tell the browser how it should interpret code written in CSS. 

While yes, it will still be a little while until Houdini is fully implemented and cross-browser ready, this talk examines how we can use it today in a progressively enhanced manner to power-up our UI's.

CSS Houdini Today

Learn how visual validation works, see a live integration into an existing test code base, and discuss the pros and cons of using various visual validation techniques.

Automation has come a long way in assisting with regression testing efforts. Teams worldwide are successfully running hundreds of functional regression tests at every check-in. While this provides a great source of confidence, critical regression bugs are still missed using this approach. That’s because these tests can only assert on what their human programmer asks them to. Additional errors with functionality, UX, and usability often go uncaught using today’s most common test automation techniques.

For this reason, the top companies in all sectors of the industry are turning to visual validation. Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

In this talk, you'll learn how visual validation works, see a live integration into an existing test code base, and discuss the pros and cons of using various visual validation techniques.

Your Tests Lack Vision: Adding Eyes to Your Automation Framework

In this talk, we'll look at how p2p can be applied to the Web and what benefits we can gain from it: from sharing costs, to data privacy, to open source, and beyond.

May of us remember peer-to-peer networking from the days of Napster, file-sharing, and Metallica lawsuits. Was that all that p2p was good for? What if we used it to host Websites instead? 

In this talk, we'll look at how p2p can be applied to the Web and what benefits we can gain from it: from sharing costs, to data privacy, to open source, and beyond.

Why p2p deserves another chance

With WASI, the WebAssembly system interface, WebAssembly can be used outside the browser in a portable and safe way.

Earlier this year, we announced WASI, the WebAssembly system interface. With this system interface, WebAssembly can be used outside the browser in a portable and safe way.

As Solomon Hykes, co-founder of Docker, said, "If WASM+WASI existed in 2008, we wouldn't have needed to create Docker. That's how important it is. Webassembly on the server is the future of computing."

But WASI will be useful for so many other use cases, too. In this talk, we'll explain how WASI works and explore how different use cases can benefit from it.

Bringing WebAssembly outside the web with WASI

This talk introduces Programming Language Foundations in Agda, a new textbook that is also an executable Agda script---and also explains the role Agda is playing in IOHK's new cryptocurrency.

The most profound connection between logic and computation is a pun. The doctrine of Propositions as Types asserts that propositions correspond to types, proofs to programs, and simplification of proofs to evaluation of programs. 

The proof of a conjunction is a pair, the proof of a disjunction is a case expression, and the proof of an implication is a lambda expression. Proof by induction is just programming by recursion. Dependently-typed programming languages, such as Agda, exploit this pun. To prove properties of programming languages in Agda, all we need do is program a description of those languages Agda. Finding an abstruse mathematical proof becomes as simple and as fun as hacking a program. 

This talk introduces Programming Language Foundations in Agda, a new textbook that is also an executable Agda script---and also explains the role Agda is playing in IOHK's new cryptocurrency.

(Programming Languages) in Agda = Programming (Languages in Agda)

We talk a lot about how to animate on the web, and what’s possible in browsers today, but where is animation heading? 

We talk a lot about how to animate on the web, and what’s possible in browsers today, but where is animation heading? 

In this talk, we’ll start with some bleeding edge techniques such as native-like page transitions with nuxt, but then we’ll push it further. 

The intersection of health and animation with biofeedback sensors and Vue, the future of 3d in the browser complete with interviews with people who are writing these specs… this talk will show that in terms of animation on the web, we’re just getting started.

The Future of Web Animation

What's the difference between a functional team and a failing team? How do we make a failing team functional, and a functional team great? 

What's the difference between a functional team and a failing team? How do we make a failing team functional, and a functional team great? 

Let's talk about layers of communication, why outcomes are more important than process, and how to figure out where to begin - and whether you should.

It’s Probably Fine

Daniel explains what TC39 is and how they work, looks at some newer language feature proposals, and follows how decorators have been proceeding through the TC39 process.

JavaScript decorators were created in 2014 as a collaboration among the JavaScript ecosystem, and you've been able to use them in TypeScript and Babel. But they didn't make it into the JavaScript standard yet: not ES6, or any of the later versions, so far. We're working on standardizing decorators in TC39, the JavaScript standards committee, but some changes are required from the initial version.

In this talk, Daniel will explain what TC39 is and how we work. We'll look at some newer language feature proposals, such as Temporal and immutable records and tuples, and follow how decorators have been proceeding through the TC39 process, including why and how they're changing. TC39 could use your help in moving JavaScript forward.

Standardizing JavaScript Decorators in TC39

HTTP/3 is designed to improve in areas where HTTP/2 still has some shortcomings, primarily by changing the transport layer.

HTTP/3 is the designated name for the coming next version of the protocol that is currently under development within the QUIC working group in the IETF.

This time TCP is replaced by the new transport protocol QUIC and things are different yet again!

HTTP/3 is designed to improve in areas where HTTP/2 still has some shortcomings, primarily by changing the transport layer. HTTP/3 is the first major protocol to step away from TCP and instead it uses QUIC. 

Daniel Stenberg does a presentation about HTTP/3 and QUIC. Why the new protocols are deemed necessary, how they work, how they change how things are sent over the network and what some of the coming deployment challenges will be.

HTTP/3 - HTTP over QUIC is the next generation

Learn about Rust, WebAssembly, serverless technologies, and how it all fits together.

A lot of things have been said about WebAssembly inside of the browser; after all, that's why it was originally created. But a new case is emerging as well, and that's WebAssembly on the server. 

More specifically, we're seeing a rise of support for WebAssembly in serverless application platforms, combining two brand-new technologies together. We're also seeing a lot of growth of the Rust programming language, and its close alignment with WebAssembly. 

In this talk, Steve will talk about Rust, WebAssembly, serverless technologies, and how it all fits together.

Rust, WebAssembly, and the future of Serverless

Lightning Talk list:
- Why you should be vue-ing your performance, by Debbie O'Donell
- Testing the front end, by Adrià Fontcuberta
- Design and code responsive Skeleton Screens, by Marina Aisa
- Structural and Nominal Typing (in TS), by Jakub Chodorowicz
- Shipping to production and not die trying: how we handle our PRs, by Carla Urrea Stabile
- How I Mesmerize Myself With Maze Generation, by Kevin Maes
- Why do we need Asynchronous JavaScript?, by Sagar Rathna
- Post-Redux state and workflow management for javascript applications, by Guillaume Clochard & Anthony Griffon

Lightning talks

Imposter syndrome

What would it look like to build a modern language so we could still code live, but do it safely?

Shared servers with PHP/Perl allowed editing a site’s source code even while users were active. 

Programming directly in production like this is the tightest possible development loop, with immediate feedback which brings a sense of joy to programming. But it also raises a visceral fear of breaking production traffic, losing data and transactions, and harming users.

What would it look like to build a modern language so we could still code live, but do it safely?

A programming language for a continuous delivery world

International single-track and two-day conference covering all about JavaScript and modern web technologies. 

JSCamp is an International single-track, two-day, conference curated, deeply technical, covering all about modern web technologies. There is a lot to gain from sharing best practices, learnings, and insights from different tools, frameworks and techniques across the web stack. 

Conference Opening Video

Welcoming by Courtney Christia

You are an engineer with a perplexing mystery to solve. Something isn’t right… arrays are no longer zero-based. Indexes are being skipped. Odd messages are appearing in your codebase. Do you dare to git blame? Or do you descend into the deep, dark world of JavaScript internals? 

This talk is an interactive exploration of JavaScript’s iteration protocol – the driving force behind iterating through arrays, generators and so much more. It’s a feature you use every single day – but do you know how it works? Or how to customize it for your needs? You decide where this choose-your-own adventure goes but no matter the ending, you'll become a master of iterators.

What happens next: a choose-your-own-adventure with iterators

This talk explores the implementation and performance characteristics of weak collections (WeakMap, WeakSet, WeakRefs) in V8, the JavaScript engine that powers Chrome and Node.js. 

The entries of weak collections have ephemeron semantics: an entry is cleared automatically once the key of the entry is no longer referenced anywhere else. This feature makes weak collections one option for implementing private fields. 

This talk explains what JavaScript weak collections are, and when to use them. We will also explore private fields, how they behave, and how they can be polyfilled with weak collections. 

Finally, we'll discuss performance and memory challenges for weak collections in the V8 JavaScript engine. 

Inside V8: weak collections, ephemerons, and private fields

We obsess — rightly — over bundle size, performance, code coverage, and anything else we can quantify. But what if I told you that the number one predictor of a project's sustainability is the one thing we're *not* measuring? 

In this talk, we'll take a look at what the academic literature can tell us about writing maintainable, bug-free code, and see how a new generation of compiler-frameworks like Svelte can apply those lessons to help us build rich, reliable applications.

The Return of 'Write Less, Do More'

A lot has happened in the five years since Val Karpov coined the MEAN stack to describe 'Full Stack' Javascript stacks. React rose to dominance, AWS Lambda started the Serverless movement, and Static Site Generators came back in a big way. 

What is driving this new stack of Javascript, APIs, and Markup? This is the story of how a JAMstack cynic finally turned into a believer.

JAMStack - The Total Victory of JavaScript

The rise of modern JS frameworks brought in more efficient concept of Front End programming. These inspired new approaches, such as CSS Module and CSS-in-JS, more scoped in working with CSS. It’s always a debate which is the best practice among these approaches. 

Some claimed CSS-in-JS eliminates developer’s most fear when dealing with CSS (the CSS file) with more dynamic approach. Some disagreed. If you are keen to know about CSS-in-JS and what should be considered when it comes to work with CSS, this talk is for you.

"CSS in JS - The good, The bad and The ugly"

It is estimated that 20% of the population has a disability of some kind. That’s a lot of users to leave on the curb, if your web app is inaccessible! 

When talking about web accessibility, we often focus on using the right HTML for the right purpose, setting up the right colour palette. Did you know that the way you write JavaScript also makes or breaks the accessibility of a website ? 

This talk will show you how great JavaScript can improve the accessibility of your website. We’ll walk through common interaction patterns such as navigation menus, modals, or custom form elements. 

Accessible JavaScript patterns

Did you know that the average website takes over 16 seconds to load on a mobile device? Did you know that on average the amount JavaScript and CSS that goes wasted is over 60%! 

If JavaScript and CSS are our most expensive resources to load, _*why*_ are we hurting our load times by shipping stuff we don’t ever use? How do we get rid of this unused code? How can we profile our web applications load times? 

Join me as I teach you about the performance constrains of the modern web, and how to write rich applications within these boundaries using household tools like webpack. We'll learn how you can use techniques like code-splitting and how to adopt patterns that we use here at Microsoft so you can make your applications fast and at scale!! 

How we make Web Apps lightning fast at Microsoft

We've learned to rely on sophisticated frameworks and fast engines so much that we're slowly forgetting how computers work. With modern development tools, it's easy to locate the exact code that's slowing down your application, but what do you do next? Why exactly is it slow, and how do you make it fast? 

Time to regain the lost art of algorithmic performance optimization! Software performance is all about recognizing and eliminating unnecessary work. You can learn to do this intuitively, and eventually you'll be able to write code that's fast from the start, by default. Let me show you how — on practical, real-world cases of optimizing popular open source libraries, PR by PR.

Fast by default: algorithmic performance optimization in practice

Using the debugger dev tools in your favourite browser is almost like second nature. But once a bug shows up in a browser you’re not used to, figuring out how to use their dev tools can be a big pain. 

In this talk, I want to help you out by showing the different dev tools, where you can find the basic tools, but also what unique features each tool has.

How to effectively use the dev tools in all the browsers

Somewhere on a university campus in the US midwest, a 20 some year old student was earning minimum-wage, writing code in the middle of the night that would forever change the world. Until 1992, the internet was largely textual, reserved almost exclusively to academia. 

The sea change was a browser called: Mosaic. A young engineer co-authored Mosaic and in 1993 it became the 1st consumer-friendly browser, described once as the “gateway to the riches of the internet”. 25 years later, these same internet riches have become richer content, browsing has become as quotidian as a cup of coffee though not without a touch of tumult. 

“The Shape Of The Web” is about both accomplishments and challenges that lay in past, present and future of the web, its technologies employed and its employed technologists.

Shape Of The Web

I’ve found an iteration centric workflow through prototyping with PWA enhancements that I’m dying to show you. Check out this demo, it’s a prototype you can add to your homescreen. Now, put your UX hat on, and launch that prototype. Click through a couple things. Now notice that you don’t notice anything. This illusion is brought to you by a static site! #JAMstack ftw. How could a static site feel like a native app though?

Turns out we can emulate, simulate and recreate high quality app flows with basic web technologies. I’ll share tips and tricks for helping y’all build these for yourselves and teams. They’re resilient prototypes, that many folks can hack on, which empower teams to vet things early and often. Dont’ guess it, test it; with a PWA.

Pwototyping

Web developers have long heralded Progressive Enhancement for delivering web experiences in 'layers' (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! It's time to peel back the layers and re-envision how the web is assembled.

FOUC and the Death of Progressive Enhancement

A journey into the asynchronous debugging horrors, how to avoid them and what patterns can be used to ease the life of each developer debugging applications. We all have run into issues debugging JavaScript. Knowing what went wrong due to missing stack traces in asynchronous contexts and finding the actual issue takes way too long. Especially code with promises can be tedious to debug. Following best practices in error handling reduces debugging time and improves the code base a lot!

Error handling: doing it right!

Our 2019 conference was a great success!🤩Huge thanks to all speakers, sponsors and participants for your love, support and making JSCAMP such a memorable and special one, we are beyond grateful — Hope to see you all in 2020! 

Highlights

For the first time, we did an official gathering with all our attendees with a live concert by @EmpathyTest at Sala Bikini  —  Ever since the 1950s, it's one of the most iconic clubs in #Barcelona. Lots of amazing feedback, We're already planning next year's conference! #jscamp

JSCAMP after party hightlights

The international React.js conference in Spain.

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.

2018 - The Year of Web Components

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 trade-offs 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 thogheter and I promise it will all be fine and you will leave with an ideia of type of styling is better for each project.

Hint: There is no perfect way...

The Lonely and Dark Road to Styling in React

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.

Repo: https://github.com/erikras/reactalicante2018

Next Generation Forms with React Final Form

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.

The ABC of Coded Style Guides

Santa Clause, 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.

Testing, Testing, 1, 2, NaN

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! 

Lambdas, lambdas everywhere

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. 

Building a Chrome extension with React

Modeling errors in Now CLI

Repo: https://github.com/tlakomy/react-alicante

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!

Journey through VR and AR with React

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.

The new era of zero-config tools

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.

Help! My React app is slowwwww!

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 visualization and moving further along to smaller pieces such as time progress, progress bar, seeking and replay.

Pushing React Native outside the comfort zone

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.

Components, patterns and sh*t it’s hard to deal with

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.

GraphQL Boilerplates

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.

Taming Forms in React

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.

Mobile Navigation

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. 

Motion in React

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. 

Testing a Redux store

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 lets 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. 

Powering Code Reuse with Context and Render Props

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). 

React Native: The dark side of Background tasks

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.

An unknown land of creating libraries

The obsession to always move on to the latest and greatest, and the fear of missing out while working with something that's older than few months is currently dominating the dev world. In my previous talks, I always included a short bit about this topic, and it resonated well with the audience. This time, I want to do a full talk on it, because I think everyone is struggling with this problem.

Navigating the hype-driven frontend development world without going insane

2018

Since inception React has solved problems from first principles, choosing to create the best possible product instead of relying on what was possible with already existent technology. In order to achieve this, the React team has invented new languages and paradigms such as JSX, the React component model and unidirectional data flow.

This talk will review these inventions and the supporting changes proposed to web specifications. Community sentiment towards and adoption of React and related web standards will also play a role in this overview, along with efforts for integration and cooperation, such as the usage of web components with React components.

Looking ahead, future of the library will be examined, where more standards will be used in React in order to make it smaller and more performant.

The effect of React on web standards

Nowadays, lots of JavaScript frameworks and UI libraries are focusing on building UI components. With the rise of ES2015 modules and modern build tools, we are now able to split our JavaScript codebase into smaller pieces that encapsulate their behavior and logic.

Modular CSS

How many times have you heard that Redux can be an overkill for a simple application? How many times... your simple application ends up being a complex one? What can you do if you need to get into quick iterations cycles?

Is it possible to find a trade off between both approaches? In this session we will talk about the development workflow we follow at Lemoncode when we develop React / Redux applications.

React/Redux: a development workflow

Designing UI React components is not an easy task. They often rely on several states that are hard to reproduce when we are developing in the middle of an existing app. Worst, once a component is live, how do we make sure that its well documented.

React-Storybook: Design, Develop, Document and Debug your React UI components

Forms are hard in any framework, but they are extra complicated in React due to the recommended method of using "controlled inputs", inputs where all of their state is managed by the developer, not by the DOM or the React framework itself.

Related repo: https://github.com/erikras/reactalicante2017

A practical guide to Redux Form

Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of base components that allow developers to glue UI together in a consistent way. 

Custom CSS is the path to inconsistent UI

React Native, although still a really small part of the mobile development ecosystem, is growing really fast. A lot of "real native" developers dismiss it, because of their previous experiences with JavaScript - a language not easy to love. However, they're missing an important point - it's so much more than JS.

In this talk I will show how we can create React Native applications with various alternative languages. Starting with a typed version of JS: TypeScript, going through a dynamic functional language Clojure, up till statically typed options with 20-year old OCaml and 5-year old Elm. Expect fast pace, code, and weird syntax.

But, most importantly, we'll talk about why this freedom is so important and why this can make your applications better. 

Beyond JavaScript: The Real Benefit of React Native

React Native ecosystem is awesome, we have plenty of tools and libraries to start right away creating our own app. But where are those apps? How should we proceed to start building more apps and less tools?

In this talk, I will drive you through my journey in a personal project that went from a pure Android application to a cross platform React Native app where we can support both iOS and Android.

React Native case study: From zero to a super hero app

MobX or Redux? Mutable or Immutable? Why not do both? Lets discover together MobX-State-Tree, an ongoing experiment to create an opinionated state management library that mixes mutable and immutable, oop and functional programming, redux and mobx, trying to take the best of both world to create the next generation of state management!

Mutable or Immutable? Let's do both!

Why I Love Create React App

Functional Reactive Programming (FRP) gets a lot of hype nowadays. The JavaScript community provides us with excellent tools like RxJS, Bacon, and Kefir. But how do you use the power of FRP in your projects? How do you make your React application Reactive? 

How to make React applications really reactive with Focal?

Having a good testing setup, one that allows us to create meaningful tests and is not a painful process, is extremely important to produce quality code. In this talk we will explore the options that we have, and will explain how to leverage webdriver for end-to-end testing React applications.

Related repo: https://github.com/ForbesLindesay/end-to-end-testing-react-applications

End to End testing React applications

React is a wonderful tool to write reusable ui components but it takes no decisions on how they should be styled. This leads to a huge amount of different styling approaches, most of them based on CSS in JS, that usually introduce some coupling with your code.

Is it possible to skip this dependency and to write components that doesn't depend on style? In this talk we will go through some of the most interesting approaches made by styling libraries, analyzing what should they cover to make components highly reusable and customizable. Eventually we will see a technique that the upcoming React Toolbox Core is going to use to ship complex components agnostic from style. We will see how really complex components like DatePickers can be reused and re-styled even for React Native.