Straight to Business.

Are you into React, React Native, GraphQL, and Reason and hungry to learn from the best?

The React ecosystem and community have grown dramatically in the last few years, as has the complexity of web and JavaScript app development. Don't go the journey alone—connect with a global network of field experts and gain invaluable, behind-the-scenes insights. Engineers of any level are welcome, but be prepared to get hardcore.

React Advanced London is brought to you by the organisers of React Amsterdam and the experts at FocusReactive.

React Advanced

2020

CityJS Conference is a JavaScript festival across London, a joint event from the London's JavaScript meetups, including London JS Community, JS Monthly, Halfstack and Node User Group.

This is a fantastic opportunity for the JavaScipt community, and for those aiming to stay in touch with the industry, be updated on innovative changes around the industry and JS as an entity, absorb knowledge while you can hop on and off thought-provoking workshops and talks this is possibly the most central and reasonably priced event to attend in London. 

CityJS

Straight to Business

Are you into React, React Native, GraphQL, and Reason and hungry to learn from the best?

The React ecosystem and community have grown dramatically in the last few years, as has the complexity of web and JavaScript app development. Don't go the journey alone—connect with a global network of field experts and gain invaluable, behind-the-scenes insights. Engineers of any level are welcome, but be prepared to get hardcore.

React Advanced London is brought to you by the organisers of React Amsterdam and the experts at FocusReactive.

This talk will explore strategies for fixing performance issues in your apps when they arise. We will look at how we can make our React apps “Blazing” fast, and when it’s time to bail out of React in the name of perf.

Keynote: Performance is magic

In this talk, we’ll create an effective mental model of React Hooks by building a tiny clone of React!

In this talk, we’ll create an effective mental model of React Hooks by building a tiny clone of React! This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how you get Custom Hooks and the Rules of Hooks out of this incredible mental model!

React (with Hooks) from Scratch

"Can we do this thing drag and droppable?". That’s one of the sentences that every front end developer fears the most. There are many DnD libraries out there but did you ever consider building something from scratch before adding additional 100kB to your bundle?

Let’s take a look what tools browsers offer today. You can build beautiful and accessible experiences while supporting mobile devices and not sacrificing the performance! This talk is inspired by the recently released react-movable library.

What a Drag

Do your unit tests feel like a chore to maintain? Are they sometimes useful but come with a high maintenance cost? Do you secretly believe you’d work faster without them there? A great test suite should help speed up your development process, not slow you down. 

This talk highlights some techniques you can use to improve the front-end unit tests you write.

Don’t Let Your Unit Tests Slow You Down

Let’s explore the challenge of statically typing JavaScript, which is notoriously complicated due to the dynamic nature of the language. We’ll start in 2005, when academia researchers first started exploring the idea of adding a strongly typed system on top of JavaScript. 

We’ll walk through the complications at hand (with plenty of examples), and understand the design goals of both TypeScript and Flow. After understanding the state of the art, we’ll briefly go over what’s going to change in this space over the next few years.

Statically Typing JavaScript

Advanced TypeScript with React

React-ing to Tech Debt

Large Scale 3D Apps with WebGL and React

React`s Tackle Box, Using the Right Hooks for the Job

Escape From React!

GitNation Open Source Stage

This is a meta talk about building design systems and all the angles you can approach it from. 

""Design systems are for people"", not just dev and design people, all the people. There are so many angles that you can approach design systems from and all of them are valid. I’ve been doing this for more than 2 years now, and I’m still discovering new ideas and patterns. 

Here are some of my thoughts on a system for designing design systems.

Design Systems Design System

We’ve all looked at a chunk of code and had no idea what it does - only to realize that we were the ones who wrote it, six or so months ago. If we can’t read our own code after a few months, how can we expect anybody else to? What kind of effect does this have on developer productivity and overall project robustness? 

This talk will explore how we were able to make a client’s React codebase more readable and improve communication and productivity on their team by leveraging technologies like TypeScript, GraphQL, and React hooks in a rewrite of their website. 

Increase the speed at which new developers are able to onboard to your project, cut down on the time between when a PR is submitted and when it’s merged, and streamline the bug squashing process.

A More Readable React Codebase Using TypeScript, GraphQL, and Hooks

Designing GraphQL Schemas

Formik 2.0

Navigating the Hype-Driven Frontend Development World Without Going Insane

Ever wondered how to use micro-services approach in a FED\mobile application? Hesitating to choose React Native for your big project? I’m here to eliminate the school of thought that React Native is mostly for small mobile applications.

React Native at Wix: Architecture For App in Scale

You’re starting a conference. You announce the conference, start planning the venue, getting sponsors, & fielding talks. Things start getting serious, & before you know it you’re overloaded with obligations. Oh, & you forgot: You also need a conference app!

You don’t just want any conference app; you want it to be fun, engaging, & a valuable addition to the attendees. How can you do this in the least amount of time?

In this talk, I’ll show how you can rapidly prototype, build, & deploy your app using GraphQL, React Native, & AWS AppSync so you can spend your time worrying about more important things in life. In addition to what you’d expect from a conference app, we’ll be adding live chat so attendees discuss talks & speakers can field questions & interact with them in real-time.

Hooking Up A Conference In Real-Time With React Native & GraphQL

React has helped us build web applications faster than ever, but turns out this doesn’t help build mobile apps.

React has helped us build web applications faster than ever, but turns out this doesn’t help build mobile apps. The main hurdle for web developers coming to mobile development (native apps with React native or PWAs) is handling offline capabilities.

In this talk I’ll speak firsthand about this learning curve, the pitfalls and realisations of doing this in production apps. As an architect developer at Theodo I’ve seen developers struggle with this mindset switch on our projects over the past 2 years, and want to share our learnings!

I’ll speak about:
- Optimistic UX updating
- Data persistence between app/server
- Offline mode (request queuing)
- Reconciling updates after this

Offline-first in React-Native: How to Lose Your Web Dev Reflexes and Build Great Offline Apps

Handle accessibility in a real context to make your apps accessible for blind people goes beyond the accessibility label and guidelines on the React Native documentation, and discover new accessibility feature in RN 0.60. 

See real cases and design flawless that can make the development too difficult, and learn about good practices to create a real accessible app for everyone.

Accessibility with React Native Apps in a Blind World

Turning the News into Cache at the Guardian

Threading in React Native: A Bridge Too Far?

Functions vs Classes

Teaching and Sharing Awesome Content 101

From a quick glance, it might not seem like D3 and React are a match made in heaven. After all, they’re both all about being in charge - who gets to render, who gets to update, who gets to decide how things should look... the story goes on and on. 

But with these two, as in life, the best relationship is about compromise and sharing responsibilities. So, how can we turn a tug-of-war into a beautiful, responsive, animated tango? Enter, React hooks!

Hooked on D3: Creating Animated Ch(art)s with D3 and React Hooks

Sometimes an app needs to access a platform API and React Native doesn’t have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions. 

In this talk you will learn how to do that and see a real-world example.

Build your own Native Module

Tensorflow.js brought Machine Learning to Javascript that gives a wide range of possibilities. Now it is possible to build, train and use ML models directly in browser. But the efficiency of ML model highly depends on the features that it is using. 

React allows to reinforce ML feature engineering process. It is great for displaying fast-changing data in web and let to visualize features, model’s layers and weights in a run-time during model training that gives useful insides on how features correspond to the result, what are good features and what features could be removed. 

During the session we will use React-based model visualization to pick the best features to predict results of soccer matches played at the FIFA World Cups. We will check count of matches that team have won and lost, count of wins and loses against a particular competitor, goal differences, stage, etc. We will validate our model using matches results from the last Mundial in Russia in 2018.

Visual Feature Engineering for Machine Learning with React

React Native is now 4 years old. During this time, we’ve observed more progression than ever before towards the vision of a cross-platform mobile solution. Even still, we have yet to realise its core mission of being as powerful as pure native. There have been many challenges that we’ve faced head on as they’ve surfaced. In overcoming them with the support of the community, we’ve managed to establish React Native as a force that is now defining the future of the segment.

In this talk, we’ll explore this history-in-the-making before diving deeper into more technical subjects including the JSI & JSC upgrade, TurboModules & Fabric, and the CodeGen. With all the pieces of the puzzle in place and landing on master by end of the year, we are closer to reaching our original objective than ever before - while pushing the limits to a whole new level.

React Native: the Past, the Present and the Future

2019

Attend _the_ conference to learn how to design, develop, and deploy fast, modern web projects that run on JAMstack, without web servers.

JAMstack Conf

See how Netlify Analytics gives you visibility into your site traffic, without sacrificing performance or privacy.

Announcing Netlify Analytics: data without the downsides. 

Netlify CEO Matt Biilmann demonstrates how Netlify Analytics gives you visibility into your site traffic without sacrificing performance or privacy. 

As a bonus, he launches the new feature live on stage using Netlify!

Introducing Netlify Analytics

An update on the evolving tools, potential, ecosystem, and community associated with the JAMstack.

The State of the JAMstack Nation

What can we do to lower the feedback loop and make it easier to create beautiful websites and apps?

Building websites is a very visual process. The goal often is to make a website that is visually appealing and easy to use. 

However, we're always building websites with code. Changing margins is done by typing, changing font styles is done by typing, and every change often requires you to wait a while before you can see the result. 

During this talk I want to explore how we can make our development tooling more visually oriented. What can we do to lower the feedback loop and make it easier to create beautiful websites and apps?

Making Development More Visual

Insights into Smashing Magazine’s Relaunch — with decisions made, failures, successes and lessons learned along the way. 

You’ve been there: big bang redesigns are usually a very, very bad idea. Redesigning and rebuilding an existing website from scratch is risky and unpredictable, and in many cases the level of complexity is highly underrated and underestimated. In mid-2016, Smashing Magazine has decided to make a big switch from the existing WordPress setup to an entirely new design, entirely new architecture (JAM Stack) and an entirely new, GitHub-based, editorial workflow.

In this talk, Vitaly Friedman, co-founder and creative lead of Smashing Magazine, will share some of the insights into Smashing Magazine’s Relaunch — with decisions made, failures, successes and lessons learned along the way. You’ll learn which challenges the transition from WordPress to a Netlify setup posed, how the team solved them and how things have evolved over years, and how switching a seemingly simple system with a job board, subscription, shop and magazine might slowly turn into a little beast that has to be tamed and cared for.

Big Bang Redesign: Smashing Magazine’s Relaunch, a Case Study

Join one of WeWork's first hires on his journey & decisions that helped shape the global footprint of it's marketing website and its massive growth.

Join one of WeWork's first hires on a 2-person engineering team in 2012 on his journey & decisions that helped shape the global footprint of it's marketing website and its massive growth.

WeWork's Journey to JAMstack

A JS-driven app gets a static render, massively improving the time to first render, and time to interactive. See useful build tools, and learn how to avoid all the gotchas.

In this session, Surma & Jake will take a JS-driven app and give it a static render, massively improving the time to first render, and time to interactive. They'll go through the useful build tools, and show how to avoid all the gotchas.

Setting up a static render in 30 minutes

GROQ (Graph-Relational Object Queries) is a query language for JSON documents designed by Sanity.io. 

In this talk, Knut Melvær (Head of Developer Relations) announces that it’s now open source and does a short demo of the new CLI tool. Check out the specification and tooling at github.com/sanity-io/GROQ.

We're Open-Sourcing GROQ

Recorded at JAMstack_conf_london 2019. Learn about upcoming dates and locations at https://www.jamstackconf.com

Build Modern JAMstack Websites in Minutes

2019 London

JavaScript has come a long way from the early days of being a scripting language. Today virtually all software projects use JavaScript. Join our exciting sessions and workshops at International JavaScript Conference to take your JS skills to the next level.

Angular, React, Vue.js, NativeScript, Electron, Node.js: Find out how to use JavaScript from frontend to backend, for native mobile, desktop apps, and even cloud native development. Build your own toolchain!

JavaScript is constantly evolving. From latest best practices in single page applications to progressive web apps and serverless computing to blockchain development: Our renowned experts at iJS will bring you the latest trends and cutting-edge technologies in JavaScript and enhance your JS knowledge where it matters.

International JavaScript Conference

This talk highlights the different types of state occurring in modern React applications and give recommendations on how to approach them.

In the past few years, the approach to application state in React has been constantly shifting. Local component state has been complemented with global state management solutions like ‘react-redux’ or ‘mobx-react’. The introduction of GraphQL libraries like Apollo brought new approaches to API caching (at least for GraphQL). With the release of React 16.3, the reworked Context API has been finally declared stable, adding a viable option for small and simple global states.

As a part of the forthcoming React 16.7, hooks will allow for easier use of local state as well as context in function components. Existing libraries are already discussing new hook-compatible APIs that will change the way we are using them. Furthermore, the upcoming ‘suspense’ mechanism is bound to spawn the birth of at least a few new libraries with focus on “perceived local” data fetching and caching.

Unfortunately, there is no “one size fits all” solution when evaluating these approaches. This talk will highlight the different types of state occurring in modern React applications and give recommendations on how to approach them with the tools currently available, with an outlook on the near future.

The State of React’s State in 2019

Learn how to integrate Vue.js into a legacy codebase.

One might think that working for brownfield projects might not be as much fun as starting something from scratch. But is this really true? 

In this session we’ll learn how to integrate Vue.js into a legacy codebase. In the end, it is possible to migrate to it completely step by step, regardless if it is a whole website, a component library or a frontend microservice.

From Legacy to Vue.js

A deep dive into the event loop, how it works, what its different phases are, and how it enables non-blocking IO.

Node.js is a very popular server-side framework that is slowly becoming the main platform for developing server-side applications. A lot of phrases are mentioned when developers talk about Node.js, such as ‘Single process with event loop’, ‘Non blocking IO’ , ‘generational garbage collector’, and more. But what do those phrases mean? Is Node.js really single threaded? How do the event loop and other internal mechanisms of the platform really work?

In this talk, I will give an overview on some of the platform internals. We will do a deep dive into the event loop, how it works, what its different phases are, and how it enables non-blocking IO. And, of course, we will answer the repeating question – is the event loop single threaded? We will also talk about the JIT compiler and the v8 engine. The session will end with a look at the garbage collector mechanism, the different algorithms that exists in each garbage collector phase, and how we can monitor our software to start detecting memory leaks.

A Journey into Node.js Internals

Nuxt.js is an opinionated framework based on Vue.js that excels when it comes to running the same codebase both server-side and client-side. 

Nuxt.js is an opinionated framework based on Vue.js that excels when it comes to running the same codebase both server-side and client-side. 

In this talk, we will focus on how it encourages convention over configuration and what kind of projects it suits best. Also, we will power up our code from a rather static (but very fast-loading) website to a full-blown SPA directly in the browser.

Nuxt.js: isomorphic Vue.js Apps made easy, fast and fun

Are you ready for a wild journey through modern day web-augmented reality?

Are you ready for a wild journey through modern day web-augmented reality? On this trip, we’ll tour through what X-Reality (the X stands for extended) has to offer developers. Our main stops include a planet called Three.js, where we’ll meet the 3D models that inhabit the real world. 

We’ll also take a quick look at its satellite, Mozilla’s A-Frame. And no trip would be complete without visiting Apple’s AR Quick Look. So take a seat, fasten your seat belt, and let’s go!

WebAR: the Augmented Reality for your Browser

Take a look at how and why you might want to use web components, followed by a deep dive into custom elements and shadow DOM.

Web components were first proposed all the way back in 2011. Since then, they’ve been kicked around without really getting much traction until recently. With the rise of components in frameworks, a new standard that is (almost) supported by all modern browsers, and support from (almost) all major frameworks, web components are suddenly looking a lot more appealing.

Let’s have a look at how and why you might want to use web components. In this session, we’ll look at how they compare with framework components and when you might want to use one or the other. We’ll take a deep dive into custom elements and shadow DOM, see how they work on their own, and how you can combine their powers to create new, better superpowers.

Web Components: It’s about Time

In this talk we’ll break down how to build an OAuth flow, then dissect an OAuth implementation done in a node.js CLI.

Ready for others to benefit from your integrations and code? You’ll probably need OAuth 2.0, but building your first OAuth flow is about as fun as stepping on Legos. In this talk we’ll break down how to build an OAuth flow, then dissect an OAuth implementation done in a node.js CLI; a challenging use case that will make OAuth 2.0 feel more approachable than ever before.

Building an OAuth Flow in a Node.js CLI

Understand the moral challenges that lie ahead for technologists, and how to create more thoughtful, ethical products for future generations.

Technology was never neutral; its social, political, and moral impacts have become painfully clear. But the stakes will only get higher as connected cameras will watch over the city, algorithms oversee society’s most critical decisions, and transport, jobs, and even war will become automated. The tech industry hasn’t yet earned the trust that these technologies demand.

Drawing on years of research for his new book “Future Ethics”, designer Cennydd Bowles will illuminate the moral challenges that lie ahead for technologists, and discuss how practitioners and companies can create more thoughtful, ethical products for future generations.

Future Ethics

Testing front-end applications does not need to be a pain. In fact, testing React applications can be quite easy if you follow some rules. 

Testing front-end applications does not need to be a pain. In fact, testing React applications can be quite easy if you follow some rules. 

In this session, we will discuss the rules you need to follow for a simpler testing experience. Additionally, I will demonstrate how straightforward testing React applications can be.

Testing React Applications

How much do you know about HTML’s semantics? A co-editor of the HTML spec will take you on a magical treasure hunt around HTML.

You know your Lookbehind Assertions, your fat arrows and asynchronous iteration. But if your code is assembling HTML to get delivered to a user’s browser, how much do you know about HTML’s semantics? Choosing the correct HTML element rather than vomiting a "div" or belching out a "span" can greatly enhance the end users’ experience, with no fragile extra code to write and maintain.

One of the co-editors of the HTML5.3 spec will take you on a magical treasure hunt around HTML, showing you marvelous gifts and hidden wonders that will also help future-proof your code, and turn you into a time-travelling Frontend Superhero, adored by millions*.

(* actual number not guaranteed. But your users will be happy.)

The HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 Minutes

React and D3 are UI tools designed for goals that sometimes collide as they both take control of the DOM in different ways. How can we make them work together?

React and D3 are UI tools designed for goals that sometimes collide as they both take control of the DOM in different ways. How can we make them work together?

In this talk, we will see how developers can build React projects with the power of D3, using different techniques and the best libraries for your work or side projects.

The React and D3 ecosystems

Your JavaScript-based website might be keeping you from reaching the top of the Google results.

Traffic from Google’s searches is crucial for many businesses, big and small. And I bet it’s important for you, too. But what if I told you that your JavaScript-based website might be keeping you from reaching the top of the Google results?

I’m Tomek Rudzki, the writer behind Elephate’s hugely successful “Ultimate Guide to JavaScript SEO”. In this talk, I want to share my extensive knowledge about how to make you and your JS website successful.

How can you make a JavaScript Website successful in Google?

Taking over the world is not an easy challenge. It requires a good strategy and a powerful army. What better soldiers than a mass of obedient robots?

Taking over the world is not an easy challenge. It requires a good strategy and a powerful army. What better soldiers than a mass of obedient robots? You just need a way to issue them instruction via their BLE interface. But should you choose to build a web app or a native mobile app?

With Angular, you can do both; just add Web Bluetooth API to build a web app and NativeScript to build a native mobile app. Join this session to learn how it all works, to see how to get started, and to swear fealty to your new robot overlords.

Building a Robo-Army with Angular

ReactJS Girls is a non-profit one-day conference for every React developer, where women will take the stage.

The React.js Girls community was created in 2017 by YLD. The meetup’s focus is giving a platform to female engineers that want to learn from, and teach their experiences using React.js. Although the meetup is aimed at women in the tech community, attendees of any and all genders are welcome to attend. Today, we have +1200 members, 2 locations and 19 editions. 

ReactJS Girls

Building a Design System with React

The How and Why of Flexible React Components

Storybook: A React Native Love Story

How to Automate Your React Workflow

Life is Hard and So is Learning GraphQL

Kate Beard joined us to share her story at Founders & Coders. 

Architecture your Culture like you Architecture your Code

Marcy sharing how we can make a difference with a Live Accessibility Audit with React JS.

Empathy Driven Development: A Live Accessibility Audit with React JS

Functional Programming with ReactJS

React Hooks: A Hype Driven Development in React

Highlights

In our second edition of CityJSConf we had another successful event hosted at Curzon Soho Cinema and Microsoft Reactor.  

The first two days had 6 Free workshops that were given by our sponsors and other very well known speakers covering areas such as Fullstack Development, Machine Learning, Artificial Intelligence, JamStack and MongoDB Serveless tools. 

During the main event we had 10 international speakers and 1 comedy act Smoosh.  

Our talks covered a number of areas as well and highlights can be seen below.

In a world where developer experience is often at odds with end user performance and experience, attempts to keep these conflicts at peace are evolving rapidly.

This talk will look at some of the benefits and challenges with more common approaches to server-side rendering (SSR), and explore our team’s journey into finding a better faster awesomer approach.

Building Apps with Dojo, A Progressive TypeScript Framework for Modern Web Apps

In this talk, we'll see what real-time messaging and data streaming means, from the protocol level of applications. 

We'll also look at various open source tools to implement the real-time messaging architecture to stream data both within and outside of your applications and address the unforeseen challenges involved, with code examples in Node.js and JavaScript. 

In the end, we'll look the evolution of the data sharing economy, the various protocols, some standardised and some not, all of which you need to know to be at the top of your tech game.

The Current State of the Data Sharing Economy

The "exotic" types of testing that interest me here (fuzz testing, generative testing, property-based testing, metamorphic testing and mutation testing) are not talked about much in the JS community. I believe that is not because they are known to be unhelpful, but rather because little is known about them at all.
 
Libraries to enable these sorts of testing are still immature, but now reaching a point where it is possible for developers to try them out and come to their own opinions about the value of these testing approaches.
 
My aim in this talk is therefore to educate about alternative testing methodologies and encourage the trialling of new tools so that the community can better gauge the value of the techniques they make possible.

The Oracle at Delphi Neither Speaks nor Conceals

JavaScript starting with ES6 offered a lot of new syntax and features. Most helps saving lines of code needs, while improves code readability and reduces the learning curve for the language.

Yet usage of these syntax without considering consequences nor situation can bring the exact opposite result. In this session, we will discuss about these pitfalls, and how to develop more proactive coding habit.

Syntactic Sugar - Diabetes Alert

JavaScript probably isn't the first language which springs to mind when you say 'machine learning', but that does seem to be changing, especially with the release of TensorFlow.js last year.
 
This talk gives a high level overview of what machine learning and neural networks are, shows how to get started with TensorFlow.js, and demos a number of projects which use JavaScript and AI.

Machine Learning and JavaScript

In my experience with JavaScript/Node.js devs I find out that Streams is a topic still mostly unexplored and sometimes even feared. This is probably one of the most beautiful features of Node.js and it can be adopted also in the browser.
 
Once you grasp the fundamentals, you'll be able to solve some ordinary programming challenges in a much more elegant and efficient way, so this is a very interesting topic. In this talk, I will cover the following topics: Streams: when and how;
 
Different types of streams; Built-in and custom streams; Composability; Stream utils; Streams in the browser.

It's About Time to Embrace Streams

Being a JavaScript developer is pretty messy. The frontend development world is in constant change and we don't even stop to analyse what we're doing any more. 

We build libraries to fix problems and keep using them although the problems are gone. We stifle creativity and innovation by telling people off for "doing things wrong". And we don't even consider understanding what others did before replacing it with the next new thing. 

Let's take a breather and stop chasing great ideas not very likely to ever be how we work. We need more people to work on interfaces. Let's concentrate on what matters.

feTurbulence; Important!

The web platform features I’ll cover in this talk (particularly Service Workers) are important topics in the JavaScript community for helping us build performant applications with great user experiences, but they also have some interesting characteristics that we can use to do things that previously weren’t possible in JavaScript.

This talk will encourage us to think about different ways we might be able to leverage these new features while giving a practical example with real code. So even if you are not interested in creating your own image format, you should walk away with some insights into the power and flexibility of the modern web platform.

Creating Your Own Image Format in the Browser

I've been developing in JavaScript for nearly 20 years and so am used to solving every problem with a JavaScript-shaped hammer. I don't think I'm alone in this, and wanted to break out of that mindset. Over my career I've professional developed in 16 different languages (and used a further 10 out of curiosity) so I set about re-writing the same code in each of those languages. The purpose of the exercise was (and is) to learn, re-learn, and refresh my memory of these programming languages.
 
By focusing on the paradigms, syntax, data types, and structure of the code I was able to draw parallels between them and JavaScript which encourages me to think outside of the JavaScript-shaped box. This talk will take you on that journey of discovery highlighting many ideas you can take back into your own code, and well as giving an insight into many other languages you might not have seen. It will also make you thankful, or otherwise, by showing what you need to work through in other languages to achieve the same results as JavaScript.

Ada 99: Rewriting the very first computer program:  How does JavaScript stack up?

Once upon a time, you could do all sort of crazy things on the web like run Java programs, and build animations using Flash. There were no standards, so developers had to make different versions of every website they built so that they’re compatible with the browsers at the time.

The web saw both a rise in creativity, and in really serious security vulnerabilities, as it became exponentially harder to develop for it.

With the adoption of (much needed) web standards and the dotCom crash, the focus has shifted to stabilizing and unifying the way we build, consume, and think about the web, and naturally some of the technologies died along the way being unable to keep up. 
 
The web as most of us know it today became variations of the same ideas and ways of building, with one language to rule the ecosystem : JavaScript. Some also argue that the web became ‘serious,’ corporate, and a way to make money, to the detriment of creativity and innovation. 
 
But the idea of running other languages on the web was still in people’s hearts, so a new glimmer of hope was born, and named WebAssembly or WASM. Simply put, WASM provides other languages like C++ and Rust a compilation target so that they can run on the web. All designed to nicely play alongside JavaScript. How exciting is that!?
 
In this talk, we will explore WASM as a way of bringing things that are not of the web, to the web. We will discuss how WebAssembly can open the web to even more engineers and creators, and boost creativity and innovation in a secure way.

A Web of Infinite Possibilities

A one day open-source ReactJS conference - festival 

Single track. 200 developers. Non-profit. By the community for the community. One day workshops / one day conf. 

ReactFest

Why would it ever make sense to put a GraphQL server inside a browser? Client-side applications using React should consider this because of how it streamlines application development and solidifies the data - component relationship. 

It can also speed up your front-end application if you're dealing with millions of rows of data because your WebWorker will be dealing with the expensive stuff and your UI's Main Thread will be free for faster rendering. 

In this talk David explains why it makes sense to run GraphQL inside a browser for "pure" client-side applications and how to interact with WebWorkers to achieve this goal. 

GraphQL Servers in the Browser

Suspense!

While about 51% of the world's websites are in English, only about 25% of web users are English speakers. 

With half of the world’s population online, internationalisation is as crucial as ever. In this talk, we'll explore why all your lame excuses for not internationalising are wrong and how you can get started with i18n today.

React + i18n - You Have No Excuse!

The React + Redux stack has become very popular and in addition with Electron is even used in desktop applications. 

Companies are using that stack to build chat clients, email clients and music streaming applications. Building applications for the desktop however comes with its own set of unique problems that usually don't apply for web applications. 

Users will have the app open for a significantly longer period of time than on the web. This means that all of a sudden web developers have to think about memory management. 

Redux itself does not come with tools to help you clean up your state but it is very flexible and allows developers to build solutions on top of it.

Garbage Collection in Modern Web Applications

We're going to start with exploring the evolution of making a SPA. 

Then we're going to dive into the problem of how fetching, caching, and reading data really complicates state-management and see what approaches we took with different libraries and frameworks like jQuery, Angular, and React.

External state management frameworks like Redux and MobX definitely helped with this problem, especially when the data is fetched from a REST endpoint.

But now that we're using GraphQL to take care of the data, is an external state-management library even needed?
Can GraphQL coexist with the other state management frameworks? What about server-side rendering? What are the pros and cons of each combination?

We'll find out what's the best way to approach this in 2018.

State Management in a GraphQL Era

Developing in React Native we often forget that event an simple "hello world" uses almost 1 000 000 lines of code. A non negligible part of it is dedicated to organising its launch, from firing the JavaScript thread to maintaining a "bridge" between JavaScript and native code. 

While it might be fine not to worry about it for small applications, bigger developments can benefit from understanding what React Native does under the hood. For example, have you ever wondered what is the meaning behind the usual boilerplate when creating a native component? 

After a short overview of the launch phase and threading in React native, we will dive deeper and look at what exactly is hidden behind the "bridge", before discussing how it allows the creation of native modules usable both from native and JavaScript code.

Wait, What Happens When My React Native Application Starts?

OK! You've gotten to grips with JavaScript typing basics, and you want to use them in anger. You see talks with titles like "Pro-functor Lenses" and shrug. You will get to that level but for now you're just trying to make types help you create something marvellous.
 
You're not alone! 
 
We're going to cruise through building a full-stack application consisting of React, GraphQL, node and ReasonML to demonstrate how to best wield these weapons against real-world web application problems with both confidence and style.

How to Draw an Owl

The future of state management in React apps is here! 

In this talk, we'll discuss why GraphQL queries and mutations are a perfect fit for describing what's happening with our app's local and remote data. 

You'll also learn how Apollo Client can simplify React state management by eliminating configuration and providing one unified interface to all of your app's data.

Zero Config GraphQL State Management

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

Hint: There is no perfect way ....

The Dark and Lonely Road to Styling in React

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

Not to be confused with insurance policies for the over 50s, redux-saga is a super handy library for managing side effects (such as API calls) in your React app. When used in conjunction with Redux it's a powerful way to fetch data into the state while your main application is executing. 

Whether or not you've used the saga pattern or related libraries before, this talk will explain what sagas are, how they work, what they're useful for and - the icing on the cake - just how easy they are to test (especially compared to some of the alternatives out there such as redux-thunk).

The talk is pitched at developers who are comfortable with React and have at least a baseline knowledge of what Redux does. 

An Introduction to Redux Saga: Side Effects Made Easier

What are the secrets to productivity for a React developer? Could you be faster and happier while building components? 

From Stephanie's experiences working on React/Redux projects that have lasted from days to years, she will share some of the tools, work environments and teams that have worked best.

Productive React Development

While the React stack and its many third party tools are powerful Beasts, as a React developer we often find ourselves trapped within errors ( webpack errors anyone?) that are the main cause of frustrations in our day to day work. 

This talk mainly focuses on going through some of the common development errors, peeling through the underlying principles of React, GraphQL and webpack in better understanding how we could tame those three beasts and be a master of our tools.

Taming the Beast  How to Tame React and GraphQL

ReactFest is an open-source ReactJS conference build by the community, for the community. 

ReactFest 2018 experience

Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!

We Need To Talk About Our Frontend Workflow

2018

Red Badger is running the React London Conference to help chart what’s possible and give the community a place to share discoveries. This is not-for-profit, the money generated will help cover our costs for this and future events.

React London

There's been a revolution; welcome the Component Age! Now what about styles? Max sat down with Glen Maddern (CSS modules) to think about how styles fit into our post-revolution world. They took the best of CSS and the web to create a fantastic new way to style component-based systems.

The road to styled-components: CSS in component-based systems

Bundling JavaScript nowadays is trivial. But what if you need to do it 10,000 times a day to thousands of users, with sourcemaps, served directly to the browser in under 2 seconds? Oliver will show us how they did this at Qubit.

Realtime Webpack - Pushing on-demand bundling to the limits

What's in a language? How can it help us express our intent better? Based on his last talk, Cheng will explore some concrete, daily patterns in our codebase that Reason elegantly solves through a few simple yet rich concepts.

What's in a language?

Combining ideas from both Redux and CRDT, Logux is a new tool which replaces AJAX with real-time data in applications, synchronising action logs between the client and server while also providing an offline mode. This approach could significantly simplify application code and bring plug&play support for live updates and offline editing.

Logux, a new approach to client-server communication

JavaScript developers are spending soooo much time formatting their code and even more in back and forth in code review fixing small nits. It turns out that machines are really good at doing this kind of tasks. Christopher will walk us through the technical and people challenges of bringing a JavaScript code formatter to reality.

Javascript code formatting

Facebook introduced snapshot testing in Jest last year and it has already picked up a huge interest. Why is snapshot testing so popular? How and when should you use it? Can you use it even if you’re not using Jest? Anna will explain all this and more in only 10 minutes.

Snapshot testing

React is capable of rendering to more environments than the browser. React is really two separate pieces: core and renderers. ReactDOM, ReactNative, ReactVR are but a few renderers in existence. With the Fiber reconciler rewrite comes an official renderer API. Dustan will look at a number of renderers that already exist and implement a React renderer of his own!

A tiny Fiber renderer

Next.js has generated a lot of hype in the short time that it’s been out (rightly so). It’s unveiling coincided with an initiative to rebuild Deliveroo's web application as a standalone app. Jasdeep will share his experiences using it so far, including some of the benefits & trade-offs.

UK