This is the fourth post indexing React talks here on MeetupFeed (previous posts: React Q2, React Q3, React Q3 conferences). From the beginning it was obvious that the React community is one of the most active global dev communities and it hasn’t changed for the last quarter of 2017 either. 118 videos is a lot so you might want to try the MeetupFeed app (beta!) for better browsing experience. Try the search feature for finding talks for your interest.
Subscribe to the monthly newsletter and receive the next React Talks digest in April.
Jump to the event's videos:
- ReactNYC (New York, NY)
- React Chicago (Chicago, IL)
- React Minneapolis (Minneapolis, MN)
- Phoenix ReactJS (Phoenix, AZ)
- React London (London, UK)
- ReactiveConf (Bratislava, Slovakia)
- WarsawJS Meetup (Warsaw, Poland)
- React Day Berlin (Berlin, Germany)
- ReactJS Meetup Munich (Munich, Germany)
- React Vienna (Vienna, Austria)
- React Seoul (Seoul, South Korea) — Language: Korean
ReactNYC (New York, NY)
Contributing To React (19:50)
How can you learn React internals, work with Facebook engineers like Dan Abramov, and give back to open source all at the same time? Work on PRs to React! In this talk I walk through how I became a React contributor and give a basic overview on what you need to know to do it.chi
Nathan Kane (Petal)
Dan La Feir
Native in-app advertising has historically centered around WebViews, which struggle with inconsistent layouts, slow rendering, and limited access to device capabilities. See how SCRUFF has built a pipeline to deliver full-screen native advertising using single-page React Native bundles.
Testing user interfaces has always been tricky. The details of UI are nuanced and subjective. “Does this look right?” Co-opting existing testing solutions like unit, E2E, and snapshot tests tends to be brittle and time-consuming. Visual testing takes a different approach. It focuses the human tester (you) on the exact components in the exact states that require attention. It turns out to be a pragmatic yet precise way to test component libraries. This presentation goes over why to consider visual testing, what tools are needed, and how it fits into your development process.
Jared Palmer (The Palmer Group)
Universal React applications are tough to configure. Either you buy into a framework like Next.js, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all the complex configuration needed for SSR into a single dependency–giving you the developer experience of create-react-app, but then leaving the rest of your app’s architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly… whatever comes next.
React gave us a great tool for building UIs declaratively by abstracting away the details of putting DOM trees together and adding events to them. When you use React, you rarely have to use imperative methods like appendTo and addEventListener directly. But what about the rest of the DOM’s imperative APIs? In this talk, we’ll explore how we can extend what React taught us about making the DOM declarative to other imperative APIs as well!
Erik Duindam (Everwise)
Migrating your application from any front-end framework to React can be a challenging and time-consuming exercise. At Everwise, a team of about six engineers has worked over half a year on gradually porting our front-end codebase from Angular 1 to React, by letting both frameworks work together in production. In this talk, I’ll explain how we architected the move, what tools we used, what mistakes we made and what benefits we’re seeing from having moved to React.
How to use Google’s Firebase + React to rapidly build scalable apps with a real-time database, authentication, and hosting.
In this presentation, we explore application development using the GRAND stack (GraphQL, React, Apollo, Neo4j) for building web applications backed by a graph database. This talk will review the components to build a simple web application, including how to build a React component, an introduction to JSX, an overview of GraphQL and why it is a game-changer for front-end development, and we’ll learn how to model, store, and query data in the Neo4j graph database using GraphQL to power our web application.
Not all systems allow the code to take over the entire rendering of your app. Sometimes you want to modernize and scale your code using libraries such as React on systems that already have a lot of legacy interactive code, or a CMS that must controls what is rendered in the page. This talk shows techniques to adopt an existing environment so modern libraries can coexist with existing environments, where the DOM dictates the components it needs.
Alfonso Cejudo (ustwo)
The journey of creating a React Native app from scratch all the way to publishing, showing the differences between what I already know from iOS+Android development and what I learned from React.
Suz will give a basic overview of what machine learning is, what it’s used for, and how you can use NodeJS to train your own models to be only an API call away.
Harry Wolff (MongoDB)
There are legacy applications that cannot be replaced. They function as expected, however they are a pain to maintain and develop. Despair not! React was built to be incrementally added to existing applications. In this talk we’re going to explore strategies for adding React to existing legacy applications, painlessly.
Prosper Otemuyiwa (Auth0)
70% of the internet is made up of videos & audios In this talk, the audience will learn everything they need to know about playback controls, offline media, image & video optimization and transformation, pre-loading, deep learning with Images, audio & improving web performance by using the right tools while dealing with media assets in their react apps.
When using React out of the box, we have two styling workflow solutions to choose from: traditional CSS stylesheets and using inline-styles. This talk breaks down the issues with these approaches and presents a more React-friendly abstraction for CSS styling known as JSS, and another called ReactJSS designed to take that even further.
Kyle Burke (Ujo)
Erin Depew (Adobe)
A brief talk on how combining Omniscient, Immutable and Immstruct with React to leverage immutable data structures can increase your app’s performance.
The latest React & React Native talks digest is available on MeetupFeed with 118 new videos: https://t.co/yEjOkSm9o7
— MeetupFeed (@meetupfeed) March 28, 2018
React Chicago (Chicago, IL)
Franklin Buitron & Daniel Coellar
Animations are a key part of every Web Application we build. We can use them to communicate, enhance and make every user interaction with our products more delightful. The goal of this talk is to showcase how we do animations at TangoCode in different scenarios based on projects we have built. Bring your computer to follow along! Franklin Buitron Originally from Uruguay, Franklin is a full-stack Senior Software Engineer based in our Chicago office and brings more than 5+ years of experience in software development, software architecture, and cloud computing. He holds a Master in Human-Computer Interaction from DePaul University. He is currently leading teams that build applications in the digital marketing industry. Daniel Coellar Originally from Ecuador, Daniel is a full-stack Senior Software Engineer based in our Ecuador office and brings more than 8+ years of experience in software development. He holds a bachelor degree in computer science and currently leads multiple teams that work mainly building ReactJS applications in different industries
React Minneapolis (Minneapolis, MN)
Tamara Temple goes over her experiences learning 3 deep technologies when she’s been doing something else for about 10 years. Her presentation will walk through using React, Apollo and GraphQL with the Rails GraphQL API…all at once.
Phoenix ReactJS (Phoenix, AZ)
When should I pass a callback vs an object to setState()? What does the second argument do? Daniel Lovell works with students at DevMountain who want to change their lives by learning how to code.
James will be covering Server Side Rendering of ReactJS applications and how it could help solve some of the issues Client Side Rendering brings. James Marrs is a full stack engineer that co-founded a custom software and consulting company, RAD Development, in 2012. Focusing on custom enterprise web applications, he is always trying to use new technologies to make his applications more maintainable with a better user experience. Coming from a background using Ruby On Rails / BackboneJS, he has been building and maintaining isomorphic ReactJS applications for the last two years and has never looked back. When James isn’t coding, he is playing soccer, woodworking and gaming.
Kyle Cesmat (Formidable)
The web is built on connectivity, but the applications we are building are often crippled when a connection breaks down. To circumvent this, Progressive Web Apps (PWA’s) are built with a toolkit of best-practices that lead to more accessible, robust, engaging, app-like experience for our users. React & Redux provide a jump-start in building PWAs, and modern browsers provide the right tools to start building today. Kyle is a UI Engineer at Formidable, a software consultancy that specializes in building web & native applications. At Formidable, he focuses on shipping performant frontend experiences for products ranging in size, scope, and technologies.
Joe Fleming (Elastic)
React London (London, UK)
Stu Harris (Red Badger)
Today’s agile cross-functional teams usually contain T-shaped (or even Pi-shaped) engineers that embrace the DevOps Culture. They can help the team increase its autonomy by owning every aspect of the team’s product (or domain), cradle to grave, including runtime management and support. Traditionally, owning the platform was a step too far; leave this bit to the experts (and go cloud-native).However, increasing levels of automation in every area have changed this. Pipelines as code (e.g. Jenkinsfile), Immutable Infrastructure as code (e.g. Terraform), Containers as code (e.g. Dockerfile), Container Scheduling and Service Orchestration as code (e.g. Kubernetes) all conspire to empower DevOps focused cross-functional teams to run their product on their own cloud-provider-agnostic Microplatforms.
A look at what React 16 has given us for server-side rendering, and what parts are still missing.
Hari Sriskantha (Theodo UK)
You know the drill: you start a new React project with the best of intentions, and the next thing you know it’s two months later and your ‘src/components’ folder is an unruly jungle of subfolders and .spec.js files. Thankfully, there’s a better approach. In this talk, I’ll describe how you can adapt Brad Frost’s Atomic Design for a React project — to speed up your development, create more maintainable code, and improve the consistency of your UI.
Mike Harris (Moo)
Implementing a shared react component library at MOO and the fun we had along the way.
ReactiveConf (Bratislava, Slovakia)
Data sync problem space and solutions. GraphQL, Apollo, PouchDB, reactivity, Meteor, Firabase, event sourcing, conflict resolution, CRDTs
A tool to synchronize Redux actions to server and between clients. It was created to reduce a lot of code around AJAX (sagas, middlewares). Instead of making request, Logux is based on CRDT ideas. It just synchronizes actions between client and server (and between clients through server). So you just put some action to Redux and then you can forget about it. Logux will synchronize it when it will have connection (before it Logux will show “Warning, not all actions is synchnized” widget to client). Offline-first and live updates out of box. About Andrey: creator of PostCSS and Autoprefixer.
(1) On *very* popular data synchronization protocols you did not know about (2) why JSON adds no value, and (3) how to fix things with Replicated Object Notation.
A talk about lessons learned migrating an Angular application to React whilst avoiding a big bang rewrite.
Gabe Scholz (Kickstarter)
Sean Larkin & Tobias Koppers
Lucas Pereira Caixeta
Tobias Koppers & Sean Larkin
Manfred Steyer (SOFTWAREarchitekt.at)
An application’s performance influences its acceptance and therefore also its commercial success significantly. However, there is not a sole adjusting screw for performance tuning in single page applications but even several influencing factors that need be considered. With its architecture, Angular addresses these aspects and offers some possibilities to provide a breath-taking performance. By the means of an application which is optimized systematically, this workshop shows how to use these possibilities. You learn how to leverage Ahead of Time Compilation (AOT), Tree Shaking and Lazy Loading to improve the startup performance of your application dramatically. In addition to that you see how to use the optimization strategy OnPush to speed up data binding performance in your solutions. Furthermore, Service Worker for caching and instant loading is covered as well as Server Side Rendering to improve the perceived loading time.
Darpan Kakadia (Cleartrip)
Introduction to property based testing
What is RNRF?
Jerome Schneider, Sven Sauleau
WarsawJS Meetup (Warsaw, Poland)
FrintJS is a environment and rendering library agnostic framework, that allows you to build reactive applications in a very scalable way. It integrates with React, React Native, and also Vue.js. The framework guides you to adopt reactive programming utilizing RxJS.
React Day Berlin (Berlin, Germany)
Tyler Clark (Pluralsight)
Redux is a strict framework. Whether you view that as a pro or a con, handling async actions can sometimes be a pain. Especially if you are using middleware such as Redux Thunk and have to chain promises. As an application grows, it’s difficult to maintain and continuously test these actions. By the use of the ES6 generator function, Redux Sagas break up async actions into synchronous events. This makes it easier to test, chain actions that depend on the result of each other, and deserialize promises. Tyler is a Full-Stack software engineer at Pluralsight. He loves reading, writing, and teaching about emerging technologies.
One of the biggest benefits when choosing React Native is its declarative nature. Instead of laying out elements on screen manually, we tell React how our interface should look like for a given state. That, combined with React Native taking care of rendering, allows us to write things that would be hard or even impossible otherwise. One of such things are animations. Historically, we used to write them in an imperative and stateful manner. By design, these are hard to debug and – most importantly compose. In this talk we will take a look at writing animations in React Native by using Animated module.
GraphQL is riding the hype wave right now. Yet many developers don’t understand how they could benefit from it or where it fits into their stack. I’ll introduce core concepts and outline advantages of GraphQL so you can convince your manager and developer friends to use it in your next project. Nikolas is a polyglot developer and GraphQL enthusiast. He worked as an instructor at Make School in San Francisco before he joined Graphcool in January where he’s now responsible for all educational content around GraphQL.
Norbert de Langen (Xebia)
How do we maintain Storybook and support react, react-native, vue and angular and an addon-ecosystem. Get to know how are yarn, lerna, react, circleCI, redux, jest, all coming together to form the best living styleguide platform supporting react, react-native, vue and angular. About Norbert: Core maintainer of storybook and a Senior Front-end consultant working on modernizing existing codebases and greenfield projects. Norbert is passionate about, amongst other things, quality control, performance and style-guides. And of course open source.
Sara Vieira (YLDio)
I know many of you have heard about Preact and may have even played arround with it but have you seen it’s true potential? In this talk we are going to have the needed discussion about Preact and why it’s awesome. About Sara: Front-End Developer at @YLDio, open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl.
Dino Scheidt (Shoplink)
Since Apple and Google have introduced ARKit and ARCore respectively, the excitement for easy access to Augmented Reality (AR) on everyday mobile devices is exploding. So let’s take a look of how we can marry this new medium with React Native in the most efficient way. We head dive into AR by understanding our UX goals with an interactive AR stage demo, identify implementation paths as well as existing and new libraries. About Dino: A nerd in a suit. 10+ years in software development experience & previous manager at shopkick Inc., he today is the managing director and principal of shop.link, a new company dedicated to bring surprising ways of engagement & analytics to brick and mortar retail. Interests: TypeScript, React-Native, OpenCV, TensorFlow.
You can use React to develop web applications, native apps and many more awesome things. And since the launch of Airbnb’s react-sketchapp in April you can also write React components that render to a Sketch design file. In this talk, you’ll learn how react-sketchapp works and, with several examples, how you can use it to improve your design and development workflow. Kristin Baumann is a Senior Frontend Developer with great interest in UI / UX design and React programming. With a degree in Computational Visualistics and after developing abroad in Australia and Vietnam she is currently working as a Product Design & Prototyping Manager at HomeToGo in Berlin.
Marcel Cutts (Asgard)
People in our community are bursting with excitement about ReasonML – but why is that, and what does it have to do with our beloved React? Is this something for hipster types only, or will we all be using it in a year’s time? All great questions! Join me in surfing the hype wave for the answers and more! 🚀
Marcel is a vagabond software engineer whose work has ranged from providing software for satellites, to developing zombie based fitness apps for millions of users. He can often be found courageously flinging himself at emerging technologies to explore what’s all hype, what has substance, and what gives you the biggest hipster cred.
Pedro Visintin (Babbel)
¿Shall we serverless everything? Serving Universal React + Redux +etc from Lambda. We want to share our small experiment to move on serverless architecture with React.
While all CSSinJS solutions try to improve API’s for describing static styles, not many actually know how to solve dynamic styling. Let me show you how we can completely forget inline styles. Oleg had been working on web UIs for over a decade when he realized there are two major challenges in front-end engineering: understanding the state and styling its representation. To change that, he started a project called JSS back in 2014 and didn’t stop learning and improving it since then.
Olga Petrova (Sencha)
Alex Migutsky (Microsoft)
Microsoft To-Do is built with ❤ using React, Redux and some magic. Let’s dive under the hood and see what practices we use to deliver real world production app to the wide audience. About Alex: Alex builds web apps and coaches software developers.
Carolyn Stransky (Contentful)
ReactJS Meetup Munich (Munich, Germany)
Mike Grabowski (CallStack.io)
One of the biggest benefits when choosing React Native is its declarative nature. Instead of laying out elements on screen manually, we tell React how our interface should look like for a given state. That, combined with React Native taking care of rendering, allows us to write things that would be hard or even impossible otherwise. One of such things are animations. Historically, we used to write them in an imperative and stateful manner. By design, these are hard to debug and – most importantly compose. In this talk we will take a look at writing animations in React Native by using Animated module. I will share with you what I have learned when writing a music player in React Native. We will explore how connecting interpolation with events coming out of music player can lead us to stable, declarative and performant music player.
Mike Grabowski (CallStack.io)
Mike Grabowski from Callstack, who is currently managing the React Native releases as a member of the React Native core team is answering questions about the current state and future of React Native and Adrian Hall, AWS developer advocate, who talked about AWS Amplify & App Sync React Native EU Munich Meetup of the React Munich and React Native Munich Meetups 13.12.2017, Amazon PopUp Loft Organizer & Moderator: Thomas Tränkler
Nikolas Burk (Graphcool)
Nikolas will come to us from Berlin for this night to be your GraphQL mentor and introduce you to GraphQL before we dive in hands on: Building a Realtime Chat with GraphQL Subscriptions, React & Apollo GraphQL is challenging REST APIs – companies like Github, Twitter, Xing, and Shopify are already using it in production. Github is now even developing their APIs GraphQL first, seeing their REST API as a legacy. What is GraphQL and how can I use it with React? In this workshop, we’ll introduce you to GraphQL first before getting hands on building a GraphQL client based on React + Apollo against a Graphcool backend and take a look at one of GraphQL’s newer and less-known features: GraphQL subscriptions. GraphQL Subscriptions allow to integrate event-based realtime functionality into an app. The workshop will consist of theoretical and practical parts with the goal of building a realtime chat using the following technology stack: Frontend: React, Apollo client Backend: Graphcool You will also learn how you can integrate serverless functions in your backend to send emails when someone writes a “forbidden” chat message (like terrorist, bomb or REST API). Bring your own laptop (or if you’d like to pair with someone, make sure one of your brings their laptop)- no prior GraphQL experience required – beginners are more than welcome! Skill level: no prior GraphQL experience required, assumes React basics like components, state, props, render – no advanced knowledge required!
Björn Rochel (XING)
XING.com is Germanys leading online business network and has been around for more than 15 years. Architecturally it evolved from a single web application written in Perl into a complex distributed platform, written in several programming languages (`Perl`, `Ruby`, `Elixir`, `Scala` & `PHP`) and maintained by a large, distributed engineering team (~250 developers). We’ve grown a lot over the recent years both organically and through acquisitions. Our company has evolved into a set of independently acting business units with different product offerings for different target groups and potentially competing annual goals. But we still share a technical foundation and have technical dependencies between our products. RESTful APIs helped us a lot to get where we are today, but in the recent years it became more and more obvious that our current setup produces a lot of friction in our product development efforts. We want and also have to be more efficient in that area in order to be properly setup for the future. That’s where we started to look into alternative ways of building our products. When Facebook publicly presented GraphQL and talked about their motivation for it, some of the depicted challenges sounded awfully familiar. GraphQL looked like a perfect fit. But there are a lot of questions that need to be answered on along the way. This talk will be about how we tried to skin the cat. We are going to cover • how we convinced our organisation that a major architectural change is worth the effort • how we started with the endevour • how we chose the target language / runtime • how exactly we retrofitted GraphQL onto our existing platform • what challenges we encountered and what kind of tradeoffs we had to make • how we approached operational aspects as monitoring, fault tolerance and resilience • last but not least, how we are rolling out this effort organizationally
React Vienna (Vienna, Austria)
Sarah Drasner (Microsoft)
Peggy Rayzis (Apollo)
What if we use conflict-free text editing data structures (OT/CRDT) for version control?
Andrey Sitnik (Evil Martians)
David Nolen (Cognitect)
Jared Forsyth (Khan Academy)
React Seoul (Seoul, South Korea) — Language: Korean
JaeHa Ahn (Kakao Corp.)
DongYoung Lee (LG Electronics)
Kevin Jin (Foreseer llc)
MinHo Chun (ZOYI Corp)