React meetup and conference recordings from Q4 2017: ReactiveConf, React Day Berlin and more

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 theMeetupFeed app (beta!) for better browsing experience. Try the search feature for finding talks for your interest.

ReactNYC (New York, NY)

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

Tools for React and React Native are enabling a higher degree (more than 90%) of sharing across platforms (iOS, Android, and web) for most applications, unlocking massive speed gains and maintenance efficiencies for UI development teams. We’ll walk through the process of creating a truly multi-platform Javascript application, from code organization, to build process, to converting components from web-only to become multi-platform.

As the JavaScript landscape has been rapidly changing and teams adopt various libraries like React, we need to interrogate our testing patterns and paradigms. Dan wants to put React unit tests under the microscope and talk about how we can extract the more value with tools like JSDom and Enzyme. This presentation will compare different ways to write unit tests for React applications and why we write tests at all.

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.

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!

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.

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.

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.

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.

Interested in building web apps with audio functionality? Did you feel like slumping under the table when looking at the Web Audio API Docs? In this talk, we will explore a few JavaScript libraries built on top of the Web Audio API and pair them with React for a crash course in working with sound in your browser.

React Chicago (Chicago, IL)

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.

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.

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.

Due to React’s async rendering, handling render errors can be pretty tricky. Some resources tell you to use a higher-order component to manually trigger an error state, but that’s not useful for handling thrown errors. Others recommended writing a custom batching strategy and delegating the error handling to some other layer, which can be clunky. Fortunately, a new feature called error boundaries was added in version 16. Error boundaries allow your application to recover gracefully from thrown errors directly from the component tree. I’ll show you how this new feature works, and also show off its use in a real application. Joe is a frequent presenter at local Meetups and a developer at Elastic, doing full-stack Javascript and building tools that power a lot of the products you know and love. He’s currently working on a rich data presentation tool called Canvas, which will be used in this presentation.

React London (London, UK)

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.

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.

Almost 3 years ago, the first experiments concerning “CSS in JS” have emerged. In 2017 – at least since styled-components got released – writing styles in JavaScript is not at all experimental anymore. Many developers are still sceptical about it. This talk summarises both the good and the bad parts as well as the opportunities & future possibilities of CSS in JS. It will help to understand how everyone can benefit from writing styles in JavaScript. It will not give any advice on which implementation to choose.

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.

React is a wonderful tool to write reusable UI components but it takes no decisions on how styles should be written. This leads to a huge amount of different approaches, most of them based on CSS in JS, that usually introduce some coupling with your code making crucial the decision of choosing one of them. Is it possible to skip writing the styles so that a component doesn’t depend on them anymore? Can we build complex components in a way that allows them to be reused even for React Native? This talk will show how this is achievable with the upcoming React Toolbox Core. About: Javier is Fullstack Engineer at Zeit and the author of React Toolbox, one of the most popular React UI Kits out there that is used by companies such as Netflix. He’s passionate about the React ecosystem and Javascript in general, and he loves making the code look like poetry. Last but not least, he’s deeply devoted to his dog.

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.

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)

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.

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.

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.

Now that GraphQL takes care of managing data in our apps, is an external state-management library even needed? Let’s explore all the possibilities and compare the combinations of React, Apollo, Redux, MobX, and Next.js About Kristijan: Teaching React Javascript at React Academy. Cares about open source, made and maintains sizzy.co, custom-react-scripts, and mobx-router. He had the chance to work and experiment with a variety of languages and frameworks.

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.

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.

We’ll talk about why JavaScript might not be the best choice for your React Native application. Starting with why you might want to change, than moving on what yu can change too, we end with a sneak peek into the next big thing. But, most importantly, we’ll talk about why this freedom choose your programming language is so important. Wojciech is a developer interested in venturing out of the usual green pastures of “established” technology and exploring the jungle of programming languages that lies beyond. He runs a software consultancy called Brains & Beards where he helps companies deliver better applications faster.

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.

In this presentation, you will learn how you can add powerful components to your React apps. You can now utilize a grid, treegrid, pivot grid, calendar, charts, and other components in your React based apps with very little effort. Plus you can manage data and respond to events using React while rendering UI controls. Learn how you can build data-intensive, cross platform applications using React and powerful components from commercial libraries. About Olga: Software developer with more than 13 years of experience in developing enterprise and data science applications. Worked with a broad range of web technologies, JavaScript libraries, and frameworks, and she has a special interest in data visualization and developing enterprise web applications.

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.

It’s no secret that people don’t usually read technical documentation for pleasure. Users often come to your docs when they are frustrated, disappointed and at their lowest. In this talk, we’ll discuss how the language we use affects our users and the first steps towards writing use case-driven, accessible docs. About Carolyn: A journalist and JavaScript developer based in Berlin. Currently working as a technical writer at Contentful and teaching front end development in the evenings at ReDI School.

I would talk about some myths on Jest & Enzyme. Moreover to stop the comparison of Jest and Enzyme. Instead would focus on how they can work together to test well your React Components. The talk would focus on “How Jest and Enzyme complement each other” and can help you test React components in a better way. About Manjula: Senior Developer at Bookmyshow, Working on React, Redux & exploring all frontend tech stack, Tech blogger, Public speaker, OSS newbie, In love with javascript, In her free time she is a podcaster.

ReactJS Meetup Munich (Munich, Germany)

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.

Recently, AWS introduced AWS Amplify – a new JavaScript library to make it easy to integrate cloud services into your app. Adrian Hall (Sr. Developer Advocate, AWS Mobile) will go over this and other announcements relevant to the React Native community, provide a demo of the capabilities and answer any questions you may have about AWS Mobile for React Native.

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 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!

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