React Summit

React Summit 2020

How do you level up? How do you jumpstart your learning when getting into something new? Nobody has more than 24 hours a day, so how do you maximize the impact of your limited time? In this keynote, I'm going to tell you a bit of my own story, and some tips and tricks that I've learned so you can be as productive as you can be at learning new things and solidifying that knowledge so it's there when you need it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Consume ➡️ Build ➡️ Teach

Kent C. Dodds

The benefits of SVG are vast: style-able, accessible, animatable. And when it comes to SVG, the Path element is the building block of building blocks. During this presentation, we’ll take a deep dive into the language of the SVG path. Not only will we learn to read path data, but we'll also gain the ability to manipulate paths on the fly with the help of React - no Adobe Illustrator or help from a time-strapped designer necessary! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Language of Shapes: Understanding the SVG Path

Monica Wojciechowska

The main thread, on the web, has a lot of responsibilities. At the same time, web apps are getting more sophisticated every day. Therefore, the main thread gets too busy that will disappoint our user showing janky frames! The off-main-thread architecture ensures apps run smoothly on every device for everyone. In this talk, we will go through the possibilities in browsers such as WebWorker, Worklet, and WebAssembly introducing practical tools that allow us to boost our user experiences. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let the Main Thread Breathe!

Majid Hajian

Google announced that they will fully switch over to crawling and indexing sites using mobile-first indexing March 2021. Now for some companies their mobile site is dynamically rendered which has a high risk of decreased ranking on google once mobile-first indexing is fully implemented. This presentation will share how to assess what changes needs to be made, best practices to increase SEO for Mobile First Indexing, how to increase performance, and how to turn parts of your site from dynamic rendering to mobile responsive in less than two months. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Improve Your SEO

Ruth Mesfun

Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. Together they bring order to the chaos of building multiple web applications across many teams. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Nx + Next.js = ❤

Adam L Barrett

As a full-stack engineer with a bias towards the database...and a career spent working with and evangelizing database and distributed systems...why GraphQL? In this talk, I will share some of my personal journey with React, GraphQL, their respective communities, and my point-of-view on the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL and React - Two Great Tastes that Taste Great Together 

Adron Hall

TypeScript + React = ❤️

Ben Ilegbodu

We have been using hooks for a while and with that we have also been using useEffect in particular and in this today I wanna take a look at the trickier parts of useEffect and why they work that way so you can leave with a super understanding of how this magic all works. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Psycological Effects of useEffect

Sara Vieira

CDK (Cloud development kit) enables developers to build cloud infrastructure using popular programming languages like Python, Typescript, or JavaScript. CDK is a next-level abstraction in infrastructure as code, allowing developers who were traditionally unfamiliar with cloud computing to build scalable APIs and web services using their existing skillset, and do so in only a few lines of code. In this talk, you’ll learn how to use the TypeScript flavor of CDK to build a hyper-scalable real-time API with GraphQL, Lambda, DynamoDB, and AWS AppSync . At the end of the talk, I’ll live code an API from scratch in just a couple of minutes and then test out queries, mutations, and subscriptions. By the end of the talk, you should have a good understanding of GraphQL, AppSync, and CDK and be ready to build an API in your next project using TypeScript and CDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK

Nader Dabit

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Making Your React Apps Perform At Scale

Milecia McGregor

In this lightning talk we will be pushing the boundaries of HTMl5 Canvas browser APIs. Join us while we do some experiments with video in the browser to see what’s truly possible. DISCLAIMER: No promises of cross-browser compatibility. Not for the faint of heart. Must be this tall to ride. Attending this lightning talk may result in serious injury or death. All participants must bring a life jacket. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Weird with Video Manipulation and HTML5 Canvas

Dylan Jhaveri

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz. <h3>Transcript</h3> <h4>Intro</h4> Hello everyone, it's so exciting to kick off the second day of React Summit. We had awesome talks yesterday, and I'm excited to talk this morning about Blitz and building fullstack React apps. So let's get into it. <h4>Brandon's experience building fullstack React apps</h4> I was building fullstack React apps for a few years, and I happily put up with the complexity and struggle required to do so. And I did that because I loved building user interfaces with React more than any other way. But the honeymoon ended and I became increasingly frustrated with REST, with GraphQL APIs, MobX-State-Tree, and a host of other API services and libraries, managing multiple servers, multiple deployments, et cetera. Anything that got in the way of me building features slowly depleted my morale.I really wanted to love fullstack web development again. I wanted to be extremely productive again at building fullstack apps. I wanted to focus on building features instead of mostly marshaling data all around the universe.So I decided enough was enough and I set out to build the best possible developer experience for fullstack React apps. Well, there were two fundamental things that I had to have in place to achieve the developer experience that I wanted.Number one, I had to be monolithic. And a monolith means that there's only one thing. Everything is all together in one thing. So there's only one thing to develop, there's only one thing to deploy, there's only one thing to reason about as you think about your entire architecture. And a monolith is really awesome. And in my experience with Ru on Rails, I came to really appreciate the benefits of a monolith.Secondly, it is no API. The API layer in React apps is the biggest source of complexity, headache, heartache, holes in the wall. Oh, well, Brandon, that's too much. It slows you down more than you would think about. And I knew that I had to go somehow.Okay, Brandon, that sounds great, but how are we going to do this? <h4>What is Blitz.js? </h4> Well, does it mean we have to go back to 2004 and do server-side rendering? I thought so. And I was prepared to embrace that because I wanted this developer experience without the API so bad that I was willing to go down that route. And in fact, when I first announced that I was working on Blitz, the initial prototype was server-side rendered. But the early Blitz contributors and myself were trying to figure out what the architecture of Blitz really would look like? We were exploring all sorts of things, model view controller, basically everything under the sun.And so one day I was laying in a hammock in Thailand thinking about this and I asked myself, "What would this look like if it was easy?" So I thought about that for a bit and I realized that if it was easy, you could write functions that run on the server and then import them directly into your React components and use them directly. So you could use them without doing fetch calls or API endpoints or HTTP or any of that. It would just work. And so I was like, "Well, wow, that's pretty awesome. Like this could be a game changer." And turns out it was.Okay, so now you know about the single biggest defining factor of what Blitz is. So let's talk about the second two.I mentioned that I was just frustrated with fullstack web development with React, but throughout that entire time, there was one thing that constantly shone through the mess, and that was the Next.js.Next is such a wonderful framework. It's so fast and flexible and it's a nice developer experience. And so it was so clear that it was a perfect thing to build on top of and add all the other things that you need for a fullstack web development.Okay, so now we need a way to talk to the database. And back in February when I started Blitz, Prisma 2 was just coming out in beta, and it was just pretty obvious that this was going to be the modern way to access databases. And if you don't know about Prisma 2, it's awesome because you have a really nice schema that you can define and have declarative migrations from that schema. You generate a TypeScript client from that schema. And so you have fully typed database access. And then in Blitz, those types can flow all the way down to your front end. So everything is fully typed into end. <h4>Foundational principles of Blitz.js</h4> All right, so those are the three key factors of what Blitz is. Let's talk about the seven main fundamental features and principles that define everything else we do.All right, fullstack and monolithic, I touched on that. One thing I wanted to mention is that a modern monolith scales much better than like Ru on Rails, for example. And that's because you can deploy Blitz to a serverless environment, not just a server. You can do both, but if you deploy serverless, all your server endpoints can be independently scalable as serverless functions. And so the whole scaling thing with a monolith just sort of goes away. So that's really awesome. Secondly, API not required. Number three, convention over configuration. Number four, loose opinions compared to strong opinions that are hard to go against. Number five, easy to start, easy to scale. Number six, stability. And number seven, community over code.Okay, so let's talk about this API layer a bit and get into how we actually do this and how it works.We abstract the API into your compile step. So as you're developing your app, like I mentioned, you don't do any API stuff. You just import the server functions into your front end, and then at compile time, we swap that out with an HTTP API. And so you do get client side rendering, but without any of the API headache.And how you do that in a Blitz app is what we call queries and mutations. Now, this has nothing to do with GraphQL. We just use the same nomenclature, and they're just plain asynchronous JavaScript functions that always run on the server. If you're familiar with Ru on Rails or Laravel controller concept, what is basically replaced queries and mutations.Now, of course you can always add an API to a Blitz app because there's zero restrictions that we give you. So we're 100% compatible with Next.js. And in fact, we have less restrictions than Next.js does. So you don't have to worry about Blitz getting in your way. <h4>How does Blitz.js work? </h4> All right, so let's look at our architecture diagram here to maybe give you a rough idea of how this all fits together.So along the top is client-side code, along the bottom is service-side code, and the purple boxes are pages, React pages. And so you can see that in a single app, you can have a server-side rendered page and a client-side rendered page side side, and they can use the same server code. So the green boxes at the bottom are a query and a mutation, and both of those pages use that same query. And then at build time, this middle layer is inserted automatically for you, which is a JSON HTTP API. So all your queries and mutations are exposed at a unique URL, and you can use that directly from mobile apps or third parties or anything else. <h4>Convention over Configuration</h4> Okay, let's talk about convention over configuration. This means default things just work. And it doesn't mean no configuration. It just means configuration is optional.So most of the boring stuff is completely done for you out of the box. And this is especially... You especially get to see a lot of this principle whenever you generate a new app. And because it has so much stuff set up for you, basically all the things that you would set up, you would take like the first week or so of a new project and set up, all that's done. So we include ESLint, Prettier, Jest, Husky Git hooks and a number of other things just already set up for you.Now, the big thing that's really, really awesome is authentication and authorization set up in new apps default. So that means when you run Blitz new in your app name and generate a new app, you can immediately sign up and log in as a user. And isn't that amazing? Like you don't have to ever do authentication stuff for so many projects because you get out of the box with Blitz.And then if you want to add social login, we have a Passport.js adapter that you can just drop in on a single file and very easily add in like GitHub authentication or any other type of a thing that... Anything there's a Passport.js adapter for. <h4>Getting into some Code</h4> Okay, let's get into some code.All right, so this is a sign up mutation that always runs on the server. And basically the same thing is what you'll get in a new app default. This will be generated for you. So you can see we export a default asynchronous function, and the first argument to that is the arguments to the mutation, and the second is a context parameter. And this context parameter is provided Middleware and Blitz. And so default, you have one Middleware configured, which is session Middleware, and that's built in session management from Blitz.Okay, and so inside this mutation, the first thing we're going to do is validate the input. And we use a library called Zod that's really awesome for both the runtime validation and TypeScript types. So you're guaranteed that after this line, email and password are both strings and the password has a minimum length.Okay, and then we're going to hash the password and then we're going to create a user in the database. This DB object is provided Prisma 2. And so you can see how nice it is just to create a user, set the email and password and you get that user back. And then secondly, the last thing we do before returning is to create a new session, which is how you log in, and you can set the user ID, roles, anything else you need in there to use on the front end. Fairly simple.Now, how do we use this? Well, you import this direct function into your component. And so here is the signup form, and you can see we import... It's on the fifth line, I believe, we import that function that we were just looking at and we pass it to the user mutation hook inside the component. Okay, and then we can just use that mutation thing inside the hook. And so you just call it just a weight, just like a regular function there, and it just all works for you. So super slick.All right, let's look at another one.This is a git project query. And so you can see again, when we get some inputs and then the context parameter. And the first thing we do in this case is called session.authorize. And this is going to ensure that the user is logged in. If he's not it'll throw an error and that error will propagate all the way to the front end and it will show either a login form if they're not logged in, or it'll show an unauthorized page if they don't meet the required role. And of course you can customize that whatever you want, but that's the default setup. So we find the project and if we don't get the project and we throw a not found error. And again, that propagates to the front end and shows the 404 page.All right, so let's use this thing. We simply import this function over into your component.And inside this project component, the first thing we do is get the parameter from the route. So this is project ideas, a dynamic parameter that you get from the URL. And then we have a useQuery hook that you pass that query function we were just looking at. You pass it to useQuery. And then the second parameter to that is the argument. So where ID is equal to the ID of this route. And then you get that back and you just render it.Now, one thing to note here is we have concurrent mode enabled in Blitz apps default. And so you're using suspense, which is really awesome. So you can see in this component, we don't have this entire else dance of if loading, show the loading, if error, show the error, if something else, show something... Whatever. It's just very simple. So it's really cool. And then in the page component toward the bottom half of the screen you can see we have the suspense component and the fallback or the error. And so really nice API. useQuery is built on top of React Query, and a React Query provides a ton of awesome stuff that you get default in here like caching all your server data, caching validation, polling, all these sorts of things. Really powerful features. And you just get it default. <h4>Getting started with Blitz.js</h4> Okay, so how do you get started with Blitz? Well, it's pretty hard. There's only two commands.And first thing is install Blitz globally as a CLI. And then secondly is run Blitz new and pass it the name of your app. And that's it. And it'll just generate your app for you, install your dependencies and so forth. And then, like I mentioned, you can immediately sign up and log in as a user. And it's awesome. <h4>Community over Code</h4> All right, let's talk about community over code. So this is one of our foundational principles. People are far more important than anything else. And these are principles that we hold dearly in the Blitz community, but it's also principles that we as a tech community at large should really embrace and live . Secondly, we treat every person with dignity and worth regardless of who they are, what their beliefs. Every person is worthy of dignity and worth. We're all in this together. We all want to be productive, we all want to have fun in our jobs, and we're all more similar than we are different. So we can and should solve problems together.We have an entire page on our documentation linked here that details how the Blitz community operates. We'll go through pretty much everything. And so you can get a good idea like if you want to be involved in the Blitz community or not or you just want to see how things operate, that's a good place to do so. <h4>Contributing to Blitz.js</h4> Okay, now let's talk about how you can contribute to Blitz. So we need your help. We love all the help we can get. We have a bunch of features in GitHub that are ready to work on, but they're just sitting there waiting for somebody to work on them. I'm working mostly full-time on Blitz and then doing consulting on the side. So far I'm contributing far the most, but we'd love anyone else to help in their free time as much as they can. We appreciate any type of contribution, whether it's code, documentation, improving documentation, tutorials, videos, blog posts, anything you can think of.Secondly, donations and sponsorships. It's my goal to work full-time on Blitz without having to do consulting on the side. And then beyond that, I would love to pay other people to work on Blitz full-time too. So would love any type of donation or sponsorship that you can give us through GitHub. There's a button on our GitHub repo. And then secondly, the best place to get started here is the <a href="http://blitzjs.com">blitzjs.com</a> documentation, which is linked here. <h4>Links</h4> Okay, so this concludes the end of my presentation. <a href="http://blitzjs.com">blitzjs.com</a> is the best place to go to get started there. You can follow me at <a href="https://twitter.com/flybayer">@flybayer</a> on Twitter and <a href="https://twitter.com/blitz_js">@blitzjs</a> on Twitter as well. And so I would love to answer your questions now and anytime later on Twitter. Anything, like just reach out. Happy to help answer questions. And I'd love for you to try out Blitz and then let me know how it goes. Thank you so much. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Blitz.js - The Fullstack React Framework

Brandon Bayer

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising Front-End Performance Bottlenecks

Richie McColl

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps. Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool. And best of all: Flipper is extensible, so let's build our own plugin while at it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Flipper: The Extensible DevTool Platform for React Native

Michel Weststrate

Accessibility in React has been a hot topic in the last few years, but in this talk, we'll be going beyond the basics. We'll discuss what disability means beyond what you've heard before, and then use code examples to learn why semantic HTML is helpful, and when it's just not enough. We'll then look into tooling, and talk about how you can introduce accessibility testing into your teams and existing code. You'll leave with the tools and knowledge to make a difference starting today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Accessibility: Beyond the Basics

Jen Luker

There are many CSS-in-JS libraries for us to choose from. Imagine being able to take your favorite parts of those libraries and using them in one. Learn about the power of Theme UI. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Theming Gatsby Apps with Theme UI

Pariss Athena

A comparative analysis between four methods of styling React components from inline styling to Styled-Components. This talk is best suited to beginner developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Components and How To Style Them

Jemima Abu

Markdown is great for content-driven sites. MDX is even better, letting you embed interactive components directly from your markup. It's usually used for the same linear layouts you often see on many blogs, readmes, and documentation sites. But it doesn't need to be like this. In this talk, we'll see how to reshape MDX so we can use it for very different layouts, things like scrollytelling, slide decks, and more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The X in MDX

Rodrigo Pombo

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why Paid UI Components Aren’t Evil

TJ VanToll

So you built a component library. Congrats! I am sure it is awesome but did you put the same effort into its documentation? Component libraries tend to have giant APIs, dozens of components, hundreds of props and thousands of permutations. That is a lot of information to unpack. We could make the documentation very long or... super interactive. We combined component previews, API documentation, props editing and code editing into a single seamless experience. You can quickly explore various settings of each component while watching the code write itself. This talk will show you how to leverage common tools and concepts such as Prettier, babel and AST transformations to build the documentation that can literally work for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introducing React View

Vojtech Miksu

Every bug is different: Some are lurking around for months, others appear suddenly after the upgrade of a dependency. Some are introduced us, others other teams or systems. Some are painfully obvious and affect all users, others only occur in edge (cases). And the ways of finding, and eventually, preventing them, are just as diverse: be it snapshot, unit, integration, end to end tests or automated visual tests, every kind comes with its challenges and opportunities. Testing UIs is hard, but in the end, only test automation can give us the confidence we need to move fast and refactor our code relentlessly. In this talk we are going to look at what kinds of bugs there are, which tests are most effective for catching which, and how we can implement them using modern front end technologies. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fantastic Bugs and Where to Find Them

Iris Schaffer

Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create Collaborative VR Environment in the Browser with React and GraphQL

Vladimir Novick

All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accessibility as a First Class Citizen

Sophie Au

Is your complex documentation setup a maintenance nightmare and chasing away potential contributors? In this talk, you will learn how to make your React component library documentation more user and contributor-friendly with Gats and MDX. Pair this with accessibility best practices, and your documentation will be inclusively smooth. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Smoothly Inclusive Component Library Documentation

Kathleen McMahon

Do you know that the first novel ever written dates back in 1021. Its author is the Japan noblewoman Murasaki Shikibu. Till then countless of writers put their thoughts on paper and countless of readers experience their stories. People write for decades and we, as software developers, kind of ignore their craft. We write too. Not novels but software. Isn't it this still writing? Believe it or not there is a lot in common between creating fiction and writing code. In this presentation we will see how close we are to giants like Hemingway and Stephen King. Can we get some of their wisdom and apply it to our daily job as engineers. Come to this talk and will get a few practical advices. I hope my presentation will make you a slightly better React developer. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Are All Hemingway

Krasimir Tsonev

JS awsomeness beyond webpages. First we'll write a cool 2D game (in Javascript) - and then - write AI code (in Javascript!) that will be able to win this game for us. Oh, what a time to be alive! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Games Are Smarter Than Us

Liad Yosef

Panel Discussion: Testing

Tomasz Łakomy

Panel Discussion: GraphQL + React

JavaScript rules the world, and staying up-to-date with the latest JS developments is a must. So sit down and relax while watching amazing talks from 2020 and 2021 online conferences. What's your library of choice: React, Angular, Vue? Whichever that may be, JavaScript powers the web. That's why we made the following list of the best JS talks to help you stay in the loop. It doesn't matter if you're a beginner or a pro looking for advanced JavaScript courses — we've got you covered.  The list features hands-on tutorials on data visualization or neurotechnology but also talks regarding the philosophy and the future of the language. So dive in and enjoy! <h3>Shawn Swyx Wang: The third age of JavaScript</h3> The way we write JavaScript in 2030 will be completely different than in 2020, predicts Shawn Swyx Wang. And he says why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to better developer and user experience, and you can get familiar with them in this talk. <h3>Charlie Gerard: Building brain-controlled interfaces in JavaScript</h3> Neurotechnology uses technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new; however, its accessibility to JavaScript developers is.  Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment with building brain-controlled interfaces. As this technology is evolving and unlocking new opportunities, Charlie Gerard looks into one of the latest devices available, how it works, the possibilities it opens up, and explains how to start building your first mind-controlled app using JavaScript. <h3>Stuart Langridge: You really don't need all that JavaScript, I promise</h3> JavaScript is the way to add interactivity to your sites, provide a slick and delightful user experience, and make everything fast, easy, and clean. But at some point, everything changed: the tail started to wag the dog instead, and development became Javascript-first.  In this video, Stuart Langridge talks about how you maybe shouldn't rely on JS as much as you're told to and gives some practical strategies for building sites without reaching for a JS framework as the first, last, and only tool for making the web happen. <h3>Lin Clark: Making JavaScript on WebAssembly fast</h3> JavaScript runs many times faster in the browser than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines. Because of this, JS is now running in many places besides the browser. But there are still some environments where the JS engines can't apply those optimizations in the right way to make things fast.  As Lin Clark explains, her team at Fastly and she are working to solve this, beginning a whole new wave of JavaScript optimization work. In this talk, she'll show you how to improve JavaScript performance for entirely different environments using WebAssembly. <h3>Alexander Esselink: Future of Svelte</h3> "I've been looking for a good reactive application platform for a long time. At some point, a friend of mine introduced me to Svelte, and I immediately fell in love with it," says Alexander Esselink, aka Dexter, a full-stack developer at Passionate People. In this talk, he'll give you a comprehensive introduction to the future of Svelte, which is one of his favorite tools for building web applications. <h3>Gil Fink: Using data visualization to fight Covid-19</h3> The year 2020 will be remembered as the year of the Covid-19 pandemic. During the lockdowns, Gil Fink was involved in building a web app for the government health department. The app visualized the chain of infection and helped decision-makers understand the characteristics of the virus spreading and other aspects. In this talk, Gil speaks about how he used D3 and React to build the app. <h3>Chloe Noh: DIY data visualization in JavaScript</h3> As long as you have an idea about what you want to show, you can use JavaScript to collect and visualize data, says Chloe Noh. In this video, she'll show you her process of data visualization, from selecting the main subjects and key indices for storytelling to choosing the right type of visualization charts.  <h3>Jason Mayes: TensorFlow.JS 101 – ML in the browser and beyond</h3> Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk Jason Mayes. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser and take your first steps with machine learning in minutes.  By the end of the talk, you will understand how to recognize an object of your choice, which could then be used in any creative way. Familiarity with JavaScript is assumed, but no background in machine learning is required. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Skill up with these free JavaScript talks from 2020/2021

Jan Tomes

Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks! by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using React Hooks + Capacitor to Access Native Mobile APIs

Thomas Vidas

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `&lt;Suspense /&gt;` component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using &lt;Suspense /&gt;, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the &lt;SuspenseList /&gt; component. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Started with Suspense and Concurrent Rendering in React

Maurice de Beijer

The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like: - Sharing Data across apps- Caching &amp; Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination &amp; Incremental fetching- Memory &amp; Garbage Collection- Optimistic Updates Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them. In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query. By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Rethinking Server State with React Query

Tanner Linsley

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&amp;A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Full Featured Frontend App with Svelte

Mikhail Kuznetcov

Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover: - A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The biggest React conference worldwide