Render-as-You-Fetch

Feb 20, 20200 likes359 views

Robert Goik: Podczas ostatniej konferencji React Conf jednym z poruszanych tematów (poza nowym wyglądem Facebooka) była arcyciekawa technologia za tym stojąca. Wraz z najnowszym “experimental release” otrzymaliśmy wsparcie dla Concurrent Mode oraz Suspense i już teraz możemy sobie… poeksperymentować.

RENDER-AS-YOU-FETCH
DEEP DIVE INTO CONCURRENT MODE
A GENTLE INTRODUCTION TO CONCURRENT MODE

HOW TO ENABLE CONCURRENT MODE
NPM I (BECAUSE "INSTALL" IS TOO MUCH TO TYPE)

BACK TO THE FUTURE
REACT’S CORE ALGORITHM

RENDERERS
HTTPS://GITHUB.COM/CHENTSULIN/AWESOME-REACT-RENDERER
• react-dom - A declarative, efﬁcient, and ﬂexible JavaScript library for building user interfaces.
• react-tiny-dom - A minimal implementation of react-dom using react-reconciler
• react-art - React Bridge to the ART Drawing Library.
• react-canvas - High performance canvas rendering for React components.
• react-pixi-ﬁber - Write PixiJS applications using React declarative style.
• react-three - React bindings to create and control a 3D scene using three.js.
• React-GL - Render React components in WebGL for 60 FPS animations.
• ReactLiberty - Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer.
• react-vr - Render React components in WebGL/WebVR for VR apps.
• react-konsul - A react renderer that renders to the browser's devtools console.
• react-worker-dom - Experiments to see the advantages of using Web Workers to Render React Virtual DOM.
• rax - A universal React-compatible render engine.
• react-native-dom An experimental, comprehensive port of React Native to the web.
• proton-native - A React environment for cross platform native desktop apps.
• stain - [beta] rapid GUI development using familiar technologies (fat-free electron).
• React NodeGUI - Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling. 🚀
• react-gtk - React Native renderer for gtk powered cross platform desktop applications that run on OSX, Linux and Windows.
• react-qml - Build native, high-performance, cross-platform applications (desktop and mobile) through a React (and/or QML) syntax.
• react-native - A framework for building native apps with React.
• react-titanium - React custom renderer for Appcelerator® Titanium™ SDK. • react-blessed - A react renderer for blessed.
• ink - React for interactive command-line apps.
• react-cli - a react renderer for the command line.

LIFECYCLE METHODS (START, STOP, RESTART)
LEGACY
▸ Virtual DOM (render phase)
constructors
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
render
▸ Real DOM (commit phase)
componentDidMount
componentDidUpdate
componentWIllUnmount

LIFECYCLE METHODS (START, STOP, RESTART)
MODERN
▸ Virtual DOM (render phase)
constructors
getDerivedStateFromProps
shouldComponentUpdate
render
▸ Real DOM (commit phase)
componentDidMount
componentDidUpdate
componentWIllUnmount

HOOKS VS CLASSES?
CLASSES? JAVASCRIPT? REACT?

COMPONENTS
SUSPENSE
▸ Fallback (component)

COMPONENTS
SUSPENSE LIST
▸ revealOrder (forwards, backwards, together)
▸ tail (collapsed, hidden) (not with together)

DEMO 2
DEMO 2
DEMO: EPISODE 2 -
ATTACK OF THE CLONES
(OF SUSPENSE LISTS)

GITHUB
DEMO SOURCE
HTTPS://GITHUB.COM/ROBERUTO/MAKE-USE-OF-USE-DEFERRED-VALUE
HTTPS://GITHUB.COM/ROBERUTO/LIST-OF-SUSPENSE-MOVIES
HTTPS://GITHUB.COM/ROBERUTO/RENDER-AS-YOU-FETCH
HTTPS://GITHUB.COM/ROBERUTO/RACE-CONDITIONS

The document discusses connecting JHipster applications to APIs using OpenAPI and gRPC. It provides an overview of SOA protocols like REST and compares gRPC to HTTP-JSON. gRPC offers features like bidirectional streaming, deadline propagation, and cancellation propagation. The JHipster generator-jhipster-grpc module allows generating gRPC services in JHipster apps and uses the reactive-grpc library. The presentation explores documenting APIs with Swagger/OpenAPI, generating clients from OpenAPI specs, and implementing API-first development.

Spring Tooling: What's new and what's comingmartinlippert

The Eclipse-based tooling for Spring has undergo a major restructuring in 2012. Since version 3.0 the famous Spring Tool Suite is now completely restructured, fully open-source, and available at GitHub under an EPL license. This talk explains the changes and restructuring the tool suite went through, and highlights new features for Spring developers. It also provides a look behind the scenes and explains the agile development process and the project rhythm of the development team behind the tool suites from SpringSource/VMware. A brief outlook about what to expect in 2013 will conclude this session.

"Wix Serverless from inside", Mykola BorozdinFwdays

Jax2013 PaaS-Parade - Part 1: Cloud Foundrymartinlippert

Cloud Foundry is an open source Platform as a Service (PaaS) that was developed and published by VMware in 2011. It allows developers to build, deploy, and run applications on the cloud. Cloud Foundry uses buildpacks to define application environments and supports various programming languages, frameworks, and services. It provides tools for developers like vmc command line, Eclipse integration, and Maven/Gradle plugins. Scaling in Cloud Foundry can be done at the infrastructure level by the PaaS operator or at the application level by the app developer.

JAX 2013: Introducing Eclipse Orionmartinlippert

Martin Lippert introduces Eclipse Orion, an open source platform for cloud-based software development. Orion provides a lightweight and ultra-fast editor, file navigation, search, and running unit tests within a web browser. It is built entirely with JavaScript and supports features like content assist, folding, and Git integration. Orion is modular and reusable - for example, Scripted is a lightweight JavaScript editor that can run in browsers. Orion addresses innovation happening on the web but also faces challenges of offline use and transferring existing tooling to the browser.

Swagger code motion talkVictor Trakhtenberg

Building static libraries for iOS with CocoaPodsSigmapoint

Paris Container Day 2016 : Kubernetes, votre assurance-vie pour le cloud (Go...Publicis Sapient Engineering

Avec des millions de conteneurs démarrés tous les mois pour ses propres services (GMail, Search, Maps…) Google a développé un savoir-faire partagé dans de nombreux papiers de recherche, mais aussi désormais dans des projets open source comme Kubernetes et dans ses produits Google Cloud Platform. Cette session sera l'occasion de comprendre l'intérêt et la portabilité d'applications développées sur Kubernetes, de présenter certaines caractéristiques techniques de son architecture, ses dernières évolutions, quelques exemples de déploiements, et enfin de faire un point sur la communauté grandissante qui développe et enrichi le projet Kubernetes. Par Alexis Moussine-Pouchkine (Developer Relations @ Google Cloud Platform) Toutes les vidéos des conférences seront disponibles sur Xebia.tv

Scripted - Embracing Eclipse Orionmartinlippert

The Eclipse Orion project provides a platform for building browser-based development tooling. In this talk we will show how we re-used parts of Orion to build the Scripted code editor, an editor-centric and browser-based tool for JavaScript and web developers. We'll talk about the design decisions that led to creation of a new serverside architecture using Node.js and the challenges in getting the Orion code editor to work with it. We'll also look at how we build and maintain modules usable in Scripted and in Orion.

Silverstripe CMS 4.9.0 release and beyoundMaximeRainville1

The document provides an update on progress with the Silverstripe CMS: 1) The upcoming Silverstripe CMS 4.9.0 release focuses on improving accessibility and includes features like default lazy loading of images to improve page load times and SEO. 2) Future releases will have a simplified process without codeweaving partnerships and more flexible recipes not tied to specific releases. 3) Silverstripe CMS 4.9.0 will be the last release supporting Internet Explorer and future versions will aim to support the latest PHP version while upgrading testing frameworks.

"13 ways to run web applications on the Internet" Andrii ShumadaFwdays

1. There are 13 ways to launch an app to the internet including using a local machine with port forwarding, a local machine in an office with ngrok or localtunnel, a dedicated server with SFTP or SSH, cloud storage services, git-based static hosting, serverless technologies like AWS Lambda, and container/cluster-based options like Docker swarm, AWS EBS, and Kubernetes. 2. Each option has varying degrees of ease of setup, ease of deployment, scalability, and suitability for frontend versus backend apps. Local development options are easiest to setup but not production ready, while container/cluster options are more complex but very scalable and production ready. 3. The document provides a

React server side rendering performanceNick Dreckshage

This document discusses react server side rendering. It notes that server side rendering was not originally intended in react but can provide benefits with proper architecture and performance optimizations. While challenging for performance, server side rendering can improve perceived performance through techniques like templates and optimistic updates. Overall react is still recommended, but server side rendering requires care around performance.

RubyMotion Inspect Conference - 2013. (With speaker notes.)alloy020

CocoaPods talk given at the RubyMotion Inspect 2013 conference. There is another version that does not include speaker notes available at: https://www.slideshare.net/alloy020/ruby-motion-inspect-2013-without-notes-18676749 The videos that were shown on slide 5 and 6 are available at: https://vimeo.com/63891717 & https://vimeo.com/63891716.

ng4 webpack and yarn in JHipsterSendil Kumar

Viktor Turskyi "Effective NodeJS Application Development"Fwdays

For 15 years in development, I managed to take part in the creation of a large number of various projects. I have already made a number of talks on the working architecture of Web applications, but this is only part of the efficient development puzzle. We will consider the whole process from the start of the project to its launch in production. I’ll tell you how we approach the ideas of the “12 Factor App”, how we use the docker, discuss environment deployment issues, security issues, testing issues, discuss the nuances of SDLC and much more.

Cloud-Native Modernization or Death? A false dichotomy. | DevNation Tech TalkRed Hat Developers

Are you familiar with the tight coupling of apps with their underlying platform that makes change hard or lack of scalability, performance, and flexibility of existing apps built with legacy technology or the fact that re-architecting apps cannot be done overnight? If yes to any of these, you probably think that you have “Cloud-Native Modernization or Death”. But what if there is another way that shows you the incremental steps to refactor the application to microservices and make use of Kubernetes/OpenShift to effectively deploy and manage it at scale on the cloud? This session guides developers on how to get started on their cloud-native journey, starting with monolithic application migration to a modern container platform using Kubernetes/OpenShift, and modernizing applications using microservices and Red Hat Cloud-Native Runtimes (Spring Boot and Quarkus).

node.js 실무 - node js in practice by Jesang YoonJesang Yoon

Sharing 4 years of experience about node.js - A google chrome V8 engine javascript based web server technology. This slide covers about wide range of knowledge about node.js learned from 4 years of production, experiment, test & failures 4년 동안 node.js 서버 프로그래밍을 경험한 내용을 간략하게 정리해 보았습니다. node.js 를 접하시는 분들에게 도움이 되었으면 합니다.

[Workshop] "Vuetify in practice", Alexander StepanovFwdays

Implementation of the Continuous Integration based on Atlassian BambooАнете Аннемария

This document discusses continuous integration with Atlassian Bamboo. It describes using Bamboo to automatically run tests, build, and deploy code. It outlines the common CI process and how to configure a Bamboo project and plan mapped to a code repository. Bamboo is used to unify the deployment process across environments and minimize human errors during production deployments. Benefits of Bamboo include integrating unit tests, building/deploying without direct server access, and permission control.

React + Redux for Web DevelopersJamal Sinclair O'Garro

I've been working a lot with React lately and thought it would be a good idea to share what I've learned with the group. During this talk we'll take a look at Facebook's React library while drawing comparisons to frameworks like Angular. We'll see how we can use React and friends to create a fast and efficient single page app. Attendees are expected to have some familiarity with ES6/ES7 since we the codebase we will be looking at leverages features from the spec. What we'll be taking a look at: • React • React Router • Redux • Redux Sagas • Webpack • Babel

Introduction to chefKrishna Kishore

Chef is a tool that helps provision and manage servers and their configurations. It comprises of three main elements - a server, nodes, and workstations. The server manages cookbooks and policies and ensures nodes comply with policies. Nodes are the managed servers. Workstations are where code is created and changed. Chef uses resources like packages, services, files to describe a system's desired state and recipes to combine resources. It follows a test and repair model to ensure nodes match their desired state.

Stripe con 2021 UI stackMaximeRainville1

The document summarizes the history and current state of the Silverstripe CMS user interface stack. It describes how the stack originally used a mismatch of legacy technologies like jQuery, Entwine, and templates. It then overhauled to use modern technologies like Webpack, React, Redux, and GraphQL. However, the legacy stack is still in use alongside the modern one, resulting in a hybrid "weird" stack. The document advocates embracing this weirdness and focuses on incremental improvements within these constraints.

Adopting containers and kubernetes in productionTa Ching Chen

Ta-Ching Chen is a DevOps and backend engineer with experience in system architecture design, implementation, and performance tuning. His blog details his work with Kubernetes, an open-source platform for automating deployment, scaling, and operations of application containers across clusters of hosts, providing container-centric infrastructure. He discusses how Kubernetes helps eliminate dependency problems and ensure compatibility between services during upgrades through features like rolling upgrades and built-in service monitoring.

Windows containers on KubernetesCraig Peters

This document discusses running Windows containers on Kubernetes (K8s). It provides reasons why enterprises, software vendors, and SaaS operators may want to run Windows applications on K8s, including managing dependencies, automation, and serving mixed customer bases. It outlines where K8s is a good fit for Windows applications and where it may not be. It also demonstrates how to run a demo with two Windows containers - one for a PowerShell process and one for IIS - on a K8s cluster with one Linux and two Windows nodes. The document discusses the evolution of Windows support in K8s, current limitations, and upcoming features like Containerd support and RunTimeClass. It invites contributors to the Windows community and lists

JHipsterYuen-Kuei Hsueh

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Isomorphic React applications allow code to run on both the client and server, improving performance and scalability. Server-side rendering builds HTML on the server so the page loads immediately before JavaScript loads. This improves the user experience but requires loading data asynchronously. Caching pre-rendered components and separating rendering can improve performance. Progressive rendering and Facebook's BigPipe technique can further optimize loading. Performance can also be improved through code optimizations like using direct React files and load balancing with multiple server instances.

Rene GroeschkeCodeFest

René Gröschke gave a talk on the latest features and future direction of Gradle. Some of the key points included: - Gradle is moving to a Kotlin-based DSL for improved performance, tooling support, and bringing application patterns to builds. - Performance improvements include a dedicated performance team that has improved Android Gradle Plugin build times significantly. - Composite builds allow including external projects to debug dependencies or test plugins against real projects. - Build cache and distributed build cache are incubating features to cache and share build results for faster rebuilds. - Gradle build scans provide insights into builds to debug issues, optimize performance, and compare builds

An evening with React NativeMike Melusky

React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS

More Related Content

What's hot (20)

Paris Container Day 2016 : Kubernetes, votre assurance-vie pour le cloud (Go...Publicis Sapient Engineering

Scripted - Embracing Eclipse Orionmartinlippert

Silverstripe CMS 4.9.0 release and beyoundMaximeRainville1

"13 ways to run web applications on the Internet" Andrii ShumadaFwdays

React server side rendering performanceNick Dreckshage

RubyMotion Inspect Conference - 2013. (With speaker notes.)alloy020

ng4 webpack and yarn in JHipsterSendil Kumar

Viktor Turskyi "Effective NodeJS Application Development"Fwdays

Cloud-Native Modernization or Death? A false dichotomy. | DevNation Tech TalkRed Hat Developers

node.js 실무 - node js in practice by Jesang YoonJesang Yoon

[Workshop] "Vuetify in practice", Alexander StepanovFwdays

Implementation of the Continuous Integration based on Atlassian BambooАнете Аннемария

React + Redux for Web DevelopersJamal Sinclair O'Garro

Introduction to chefKrishna Kishore

Stripe con 2021 UI stackMaximeRainville1

Adopting containers and kubernetes in productionTa Ching Chen

Windows containers on KubernetesCraig Peters

JHipsterYuen-Kuei Hsueh

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Rene GroeschkeCodeFest

Paris Container Day 2016 : Kubernetes, votre assurance-vie pour le cloud (Go...Publicis Sapient Engineering

Scripted - Embracing Eclipse Orionmartinlippert

Silverstripe CMS 4.9.0 release and beyoundMaximeRainville1

"13 ways to run web applications on the Internet" Andrii ShumadaFwdays

React server side rendering performanceNick Dreckshage

RubyMotion Inspect Conference - 2013. (With speaker notes.)alloy020

ng4 webpack and yarn in JHipsterSendil Kumar

Viktor Turskyi "Effective NodeJS Application Development"Fwdays

Cloud-Native Modernization or Death? A false dichotomy. | DevNation Tech TalkRed Hat Developers

node.js 실무 - node js in practice by Jesang YoonJesang Yoon

[Workshop] "Vuetify in practice", Alexander StepanovFwdays

Implementation of the Continuous Integration based on Atlassian BambooАнете Аннемария

React + Redux for Web DevelopersJamal Sinclair O'Garro

Introduction to chefKrishna Kishore

Stripe con 2021 UI stackMaximeRainville1

Adopting containers and kubernetes in productionTa Ching Chen

Windows containers on KubernetesCraig Peters

JHipsterYuen-Kuei Hsueh

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Rene GroeschkeCodeFest

Similar to Render-as-You-Fetch (20)

An evening with React NativeMike Melusky

React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS

NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfgzmulani8

Introducing React to GraysOnlineJoseph Ni

MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon

This document discusses React, a JavaScript library for building user interfaces. It notes that React uses virtual DOM for faster rendering. React components render on state changes and use props and state as inputs. Scaling with React involves using Flux architecture and stores instead of MVC controllers. React can also be integrated with other frameworks like Backbone and Angular by triggering re-renders on data changes.

Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon

An introduction to Node.jsKasey McCurdy

This document provides a high-level overview of JavaScript and Node.js. It discusses how JavaScript originated as a browser scripting language but is now widely used for server-side applications through Node.js. Node.js uses Google's V8 JavaScript engine and allows JavaScript code to run outside of browsers. Popular Node.js frameworks like Express.js are introduced. Key features of JavaScript like asynchronous programming and Node.js concepts like modules, middleware, and MongoDB are summarized at a high level.

Why scala is not my ideal language and what I can do with thisRuslan Shevchenko

- The document discusses some of the author's criticisms of Scala, including its use of implicit parameters to configure runtime behavior, and lack of good support for asynchronous programming. - The author proposes some workarounds, like annotating imports to avoid implicit conflicts, and patching the compiler to add more information to Future exceptions. However, the ideal solution would be language changes or improvements to asynchronous abstractions like Async. - Overall, the author argues that Scala is not ideal for some use cases like asynchronous programming, but provides some workarounds people can use in the meantime. The best solutions require changes to the language and standard library.

Web Performance & Latest in ReactTalentica Software

The document discusses various techniques for optimizing web performance and React applications. It covers topics like loading time, rendering time, dev tools, React tools, the latest features in React 17 and 18 like the new root API and startTransition API. It also discusses best practices for performance optimization in React like using pure components, React.memo, lazy loading, throttling events, debouncing events, and virtualization. Code snippets are provided as examples for some of these techniques.

Aerobatic IntroductionDavid Von Lehman

This document introduces Aerobatic, a UX delivery platform that allows for nimble web applications. It emphasizes that nimbleness, or the ability to rapidly respond to changing conditions, is important for maintaining competitiveness. Aerobatic aims to provide nimbleness at the point of customer interaction by streamlining tools and processes to reduce workflow friction. It achieves this through acting as a browser-resident UX layer that decouples the presentation tier from the backend, allowing for independent release cycles and improved testing capabilities. Aerobatic handles asset delivery, provides development tools, and allows pushing changes to production with traffic routing for A/B testing.

Reactjs notes.pptx for web development- tutorial and theoryjobinThomas54

NEXT.JSBinumon Joseph

next-230524050805-d1e22a49.pdferewrewrewrewrzmulani8

Zero to Serverless in 60s - AnywhereBrian Christner

The document discusses serverless computing and OpenFaaS, an open source serverless framework. It introduces serverless functions and how OpenFaaS allows developers to easily write and deploy stateless functions. The document provides examples of how functions can be chained together and invoked asynchronously. It also shares several case studies of organizations using OpenFaaS and announces the launch of OpenFaaS Cloud.

Fast, concurrent ruby web applications with EventMachine and EM::SynchronyKyle Drake

This document summarizes Kyle Drake's presentation on using EventMachine (EM) and EM::Synchrony to build fast, concurrent Ruby web applications without blocking I/O or callback hell. Key points include: - EM implements the reactor pattern to handle blocking I/O without threads by using callbacks and kernel threads. - EM::Synchrony avoids callback nesting by wrapping callbacks in fibers, allowing synchronous-looking code. - Sinatra can be made concurrent by running each request in its own EM::Synchrony fiber with little code change. - Ruby has strong options for building high-performance concurrent apps while maintaining productivity advantages over Node.js.

Web Development session on React.JS SetupMrunalBhosale18

Scala and LiftSander Mak (@Sander_Mak)

Reactive microservices with eclipse vert.xRam Maddali

This document summarizes a hands-on technical workshop on transforming applications from monoliths to microservices using reactive architectures with Eclipse Vert.x. The workshop introduces reactive systems and programming, demonstrates how Vert.x uses non-blocking execution models to handle high volumes with few threads, and guides participants through a lab to develop reactive microservices with Vert.x that interact asynchronously without blocking.

Functional Web DevelopmentFITC

Functional Web Development – An Introduction to React.js with Bertrand Karerangabo Presented at FITC's Web Unleashed 2014 conference on September 18 2014 More info at www.fitc.ca React.js is a UI framework created by Facebook and Instagram. Its primary design goal is to help build large applications with data that changes over time. To do so at scale, conventional wisdom and some long-held assumptions about software development had to be challenged. Gone are the “M” and the “C” in MVC. Gone are templates and special HTML directives. Gone also are traditional data-bindings. The results are applications that are extremely fast and reliable, out of the box. Bertrand Karerangabo will dive into those concepts that make React.js unique and along the way, also learn how to build web applications from simple, composable and reusable components. OBJECTIVE Rethink web development best practices and explore how you can build ambitious and performant application using functional programming with a virtual DOM representation. TARGET AUDIENCE Javascript developers working on medium to large dynamic applications. ASSUMED AUDIENCE KNOWLEDGE A solid understanding of Javascript and the DOM is strongly recommended. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What React.js is and why it was built. How to deal with the “evil” of mutable state in non-trivial applications. A strategy for working around notoriously slow and expensive DOM operations. The way to truly separate concerns, instead of just technologies, in an application. The SEO, performance and usability benefits that come from using a client-side framework that plays nice with the server.

Fossetcon: Crash Course on Open Source Cloud ComputingMark Hinkle

This crash course is designed to give an overview of cloud computing architecture and the open source software that can be used to deploy and manage a cloud computing environment. Topics to be discussed in this session will include virtualization (KVM, LXC, and Xen Project), orchestration (Apache CloudStack, Eucalyptus, Open Nebula, and OpenStack), and storage (GlusterFS, Ceph, and others). The talk will also provide insight into how to deliver Platform-as-a-Service (PaaS) and what technologies can be used to compliment this evolving cloud computing paradigm. Systems administrators and IT generalists will leave the discussion with a general overview of the options at their disposal to effectively build and manage their own cloud computing environments using free and open source software and understand the capabilities and benefits of a host of technologies. [Updated with new Docker projects]

An evening with React NativeMike Melusky

React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS

NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfgzmulani8

Introducing React to GraysOnlineJoseph Ni

MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon

Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon

An introduction to Node.jsKasey McCurdy

Why scala is not my ideal language and what I can do with thisRuslan Shevchenko

Web Performance & Latest in ReactTalentica Software

Aerobatic IntroductionDavid Von Lehman

Reactjs notes.pptx for web development- tutorial and theoryjobinThomas54

NEXT.JSBinumon Joseph

next-230524050805-d1e22a49.pdferewrewrewrewrzmulani8

Zero to Serverless in 60s - AnywhereBrian Christner

Fast, concurrent ruby web applications with EventMachine and EM::SynchronyKyle Drake

Web Development session on React.JS SetupMrunalBhosale18

Scala and LiftSander Mak (@Sander_Mak)

Reactive microservices with eclipse vert.xRam Maddali

Functional Web DevelopmentFITC

Fossetcon: Crash Course on Open Source Cloud ComputingMark Hinkle

More from The Software House (20)

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...The Software House

Uszanowanko PodsumowankoThe Software House

Jak efektywnie podejść do certyfikacji w AWS?The Software House

W ciągu ostatnich 7 miesięcy przeszedłem drogę z poziomu Cloud Practitioner do Solutions Architect Professional, zdobywając nie tylko 5 certyfikatów, ale przede wszystkim wiedzę i praktykę, dzięki którym dziś pracuje mi się łatwiej i efektywniej. Na tym spotkaniu opowiem o motywacjach, wyzwaniach, strategiach nauki oraz najbardziej wartościowych źródłach wiedzy, dzięki którym zaplanujesz swoją drogę do certyfikatów. I to bez względu na to, czy dopiero zaczynasz swoją przygodę z AWS, czy masz już za sobą masę doświadczeń, które chcesz potwierdzić “na papierze”.

O co chodzi z tą dostępnością cyfrową?The Software House

Dostępność, accessibility, a11y, WCAG… Dla niektórych to tylko dodatkowe tematy do przerobienia w projektach, które pochłaniają więcej czasu i budżetu. Według mnie to jednak ważny element, który zmienia internet w przyjazne miejsce dla wszystkich użytkowników. Jak reaguje twoja mobilna apka w słoneczny dzień? Czy buttony są wystarczająco duże, żeby wszyscy (nawet niedowidzący czy seniorzy) je zauważyli? Czy da się skorzystać z systemu, który tworzysz za pomocą klawiatury? I w końcu czy ta cała dostępność to tylko “hot topic”, a może faktyczna potrzeba? Odpowiem na te pytania głównie z perspektywy biznesu, ale nie zabraknie konkretnych wskazówek technicznych. Będzie o dostępności w pigułce.

Chat tekstowy z użyciem Amazon ChimeThe Software House

Case study naszego wdrożenia rozwiązania czatu tekstowego przy użyciu zestawu Amazon Chime SDK. Moja prezentacja będzie składać się z przeglądu projektu, dlaczego w ogóle potrzebowaliśmy czatu tekstowego, podróży wdrożeniowej i wyzwań, przed którymi stanęliśmy (takich jak ograniczanie żądań i problemy ze skalowalnością). Wspomnę też pokrótce o innych funkcjonalnościach Amazon Chime, z których nie korzystaliśmy.

Migracje danych serverlessThe Software House

Pamiętacie jeszcze stare programy lub aplikacje pisane przy użyciu C, Assemblera lub innych bardzo przestarzałych technologii? Ja też nie. Za to jeden z naszych klientów pamięta i przyszedł z prośbą o przeniesienie danych z jego starej aplikacji do nowej. Podczas tej prezentacji będziecie mogli zobaczyć, jak poradziliśmy sobie z problemami wynikającymi z istniejących aplikacji oraz jak stworzyliśmy oprogramowanie migrujące dane na podstawie usług dostępnych w AWS.

Jak nie zwariować z architekturą Serverless?The Software House

Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSThe Software House

Feature flags na ratunek projektu w JavaScriptThe Software House

Piątek po południu. Wypuściłeś aktualizację na serwer z nową funkcjonalnością (mimo, że wszyscy ci odradzali). Ale był tam krytyczny fix buga. Nie miałeś innego wyjścia. 5 minut po deployu okazuje się, że system leży – nowa funkcjonalność coś popsuła. Chyba czeka cię długi piątek/weekend. Gdybyś miał Feature Flags w projekcie, to twój piątek wyglądałby zupełnie inaczej. Feature Flags (albo Feature Toggles) pozwalają ukryć funkcjonalność przed użytkownikiem końcowym i wyświetlić ją warunkowo. Dzięki temu można spokojnie merge’ować wszystko do głównej gałęzi. Albo wyłączyć funkcjonalność w ciągu kilku minut, jeśli jest wadliwa. Na prezentacji opowiem, dlaczego w swojej aplikacji JavaScript powinieneś rozważyć Feature Flags. Wady, zalety i praktyczne wskazówki jak sobie z tym radzić. I to wszystko z perspektywy osoby, która korzysta z tego od dłuższego czasu. Po wyjściu z prezentacji będziesz wiedzieć kiedy warto stosować flagi i jak utrzymać je pod kontrolą.

Typowanie nominalne w TypeScriptThe Software House

TypeScript na przestrzeni lat udowodnił że da się okiełznać dużą część problemów wynikających z dynamiczności języka JavaScript. Strukturalne typowanie które oferuje potrafi w miarę nieinwazyjnie pomóc w wykrywaniu pułapek, w które wpadlibyśmy, pisząc w czystym JS. Co jednak w przypadku gdy coś kwacze jak kaczka ale nią nie jest? Czy da się zabezpieczyć developera przed pomieszaniem dwóch różnych jednostek, które w historii doprowadziły do nie jednej katastrofy? Na prelekcji przejdziemy przez różne case study i zastanowimy się jak pomóc TypeScriptowi w ostrzeganiu nas przed pułapkami których nie zawsze da się uniknąć w pierwotnym typowaniu strukturalnym.

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLThe Software House

W ramach tej prezentacji pokażę jak efektywnie wykorzystać GraphQL `codegen` do generowania hooków i typów, które pomogą obsłużyć dowolne query i mutation, czyniąc kod nie tylko czytelniejszym, ale również łatwiejszym w utrzymaniu. W tym celu wspólnie postawimy przykładowy projekt, a także poświęcimy kilka minut na skonfigurowanie IDE. Dzięki temu nasza codzienna praca stanie się przyjemniejsza i efektywniejsza.

Serverless Compose vs hurtownia danychThe Software House

Kiedy aplikacja napisana w Serverless Frameworku jest mała, można zamieść niektóre rzeczy pod dywan. Ale co, kiedy po kilku miesiącach zaczyna wychodzić spod niego prawdziwy potwór? Co, kiedy musisz przetestować jedną lambdę na środowisku, a deploy całego stacka trwa 20 minut? No i jak przeorganizować aplikację wiedząc, że ciągle będzie rosła? Dowiedz się, jak rozbiliśmy naszą hurtownię danych wykorzystując Serverless Compose. Jakie przyniosło nam to efekty i o czym dowiedzieliśmy się w trakcie.

Testy API: połączenie z bazą danych czy implementacja w pamięciThe Software House

Testy integracyjne wykonują realne żądania na API. Trzeba zatem zadbać o odpowiednie skonfigurowanie środowiska do testów. Kwestia danych to jedno z podstawowych zagadnień z którym należy sobie poradzić. Do tematu można podejść na kilka sposobów, ale sprowadzają się one do dwóch kategorii: baza danych albo implementacja w pamięci. Dowiedz się, które z nich sprawdzi się w twoim projekcie.

Jak skutecznie read model. Case studyThe Software House

Opowieść o tym, jak w projekcie legacy, który już ledwo dychał, udało się zaimplementować read model oparty na ElasticSearch (choć nie bez przeszkód i czasami pod prąd). Podczas prezentacji aplikacja legacy i walka o przyspieszenie zapytań posłuży jako punkt wyjścia do przeanalizowania konceptu “read modeli”. Po co wdrażamy je do aplikacji? Jakie są metody utrzymania ich w spójności? A w końcu – ich wady i zalety. W przypadku wspomnianej aplikacji zapytania które trwały około 8 minut udało się przyspieszyć do poniżej 1s (choć nie obyło się to bez potknięć). Zobacz jak!

Firestore czyli ognista baza od giganta z Doliny KrzemowejThe Software House

Jak utrzymać stado Lambd w ryzachThe Software House

AWS, a w szczególności serverless computing, oferuje nam możliwość skalowania naszych systemów out-of-the-box. W większości przypadków jest to nam bardzo na rękę, ale… Co w sytuacji, gdy potrzebujemy z chirurgiczną precyzją kontrolować, ile aktualnie Lambd jest w użytku? Okazuje się, że nie jest to do końca taka prosta sprawa, gdyż AWS uporczywie robi wszystko, co może, aby wyskalować nasz system, niezależnie czy tego chcemy, czy nie. W tej prelekcji zaprezentuję możliwe sposoby rate limitingu naszych funkcji. Za przykład posłuży nam komunikacja z 3-rd party API, gdzie w większości przypadków jesteśmy ograniczeni ilością requestów, jakie możemy wykonać w jednostce czasu, żeby nie otrzymać 429-tki.

Jak poskromić AWS?The Software House

O łączeniu Storyblok i Next.jsThe Software House

The document discusses Storyblok CMS and how it can be used with Next.js. Some key points: - Storyblok CMS allows non-technical users to build landing pages from predefined components and developers to collaborate asynchronously on new components. - With Storyblok, content is modeled as the whole website layout rather than just text. It delivers JSON data to render pages. - Storyblok provides features like live preview, internationalization utilities, and an image service. - The presentation demonstrates modeling data in Storyblok, receiving it in Next.js, and coding the app to iterate over Storyblok data and map it to components to create pages dynamically.

Amazon Step Functions. Sposób na implementację procesów w chmurzeThe Software House

Zmęczony łańcuchowym (i wieloogniwowym) wywoływaniem AWS Lambd przez inne Lambdy? Śledzenie poszczególnych inwokacji od początkowej do końcowej Lambdy to droga przez mękę? I nawet AWS X-Ray tu nie wystarcza? Rozwiązaniem jest Amazon Step Function, czyli usługa AWS umożliwiająca łączenie poszczególnych kroków logicznych w proces, z jasnym dostępem do historii i szczegółów wywołań.

Od Figmy do gotowej aplikacji bez linijki koduThe Software House

AWS Amplify Studio jest nowością od AWS’a, która pozwala połączyć komponenty Figma z bazą danych i wygenerować gotowy kod React. Czy to oznacza, że frontend deweloperzy przestaną być potrzebni? A może te narzędzie to tylko chwyt reklamowy? I czemu AWS zainteresował się narzędziami low-code/no-code. Na to wszystko Aleksander odpowie w swojej prezentacji. I pokaże na żywo jak przejść od Figmy do gotowej aplikacji.

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...The Software House

Uszanowanko PodsumowankoThe Software House

Jak efektywnie podejść do certyfikacji w AWS?The Software House

O co chodzi z tą dostępnością cyfrową?The Software House

Chat tekstowy z użyciem Amazon ChimeThe Software House

Migracje danych serverlessThe Software House

Jak nie zwariować z architekturą Serverless?The Software House

Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSThe Software House

Feature flags na ratunek projektu w JavaScriptThe Software House

Typowanie nominalne w TypeScriptThe Software House

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLThe Software House

Serverless Compose vs hurtownia danychThe Software House

Testy API: połączenie z bazą danych czy implementacja w pamięciThe Software House

Jak skutecznie read model. Case studyThe Software House

Firestore czyli ognista baza od giganta z Doliny KrzemowejThe Software House

Jak utrzymać stado Lambd w ryzachThe Software House

Jak poskromić AWS?The Software House

O łączeniu Storyblok i Next.jsThe Software House

Amazon Step Functions. Sposób na implementację procesów w chmurzeThe Software House

Od Figmy do gotowej aplikacji bez linijki koduThe Software House

Recently uploaded (20)

Expand your AI adoption with AgentExchangeFexle Services Pvt. Ltd.

AgentExchange is Salesforce’s latest innovation, expanding upon the foundation of AppExchange by offering a centralized marketplace for AI-powered digital labor. Designed for Agentblazers, developers, and Salesforce admins, this platform enables the rapid development and deployment of AI agents across industries. Email: [email protected] Phone: +1(630) 349 2411 Website: https://www.fexle.com/blogs/agentexchange-an-ultimate-guide-for-salesforce-consultants-businesses/?utm_source=slideshare&utm_medium=pptNg

Landscape of Requirements Engineering for/by AI through Literature ReviewHironori Washizaki

Adobe Illustrator Crack FREE Download 2025 Latest Versionkashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe Illustrator is a powerful, professional-grade vector graphics software used for creating a wide range of designs, including logos, icons, illustrations, and more. Unlike raster graphics (like photos), which are made of pixels, vector graphics in Illustrator are defined by mathematical equations, allowing them to be scaled up or down infinitely without losing quality. Here's a more detailed explanation: Key Features and Capabilities: Vector-Based Design: Illustrator's foundation is its use of vector graphics, meaning designs are created using paths, lines, shapes, and curves defined mathematically. Scalability: This vector-based approach allows for designs to be resized without any loss of resolution or quality, making it suitable for various print and digital applications. Design Creation: Illustrator is used for a wide variety of design purposes, including: Logos and Brand Identity: Creating logos, icons, and other brand assets. Illustrations: Designing detailed illustrations for books, magazines, web pages, and more. Marketing Materials: Creating posters, flyers, banners, and other marketing visuals. Web Design: Designing web graphics, including icons, buttons, and layouts. Text Handling: Illustrator offers sophisticated typography tools for manipulating and designing text within your graphics. Brushes and Effects: It provides a range of brushes and effects for adding artistic touches and visual styles to your designs. Integration with Other Adobe Software: Illustrator integrates seamlessly with other Adobe Creative Cloud apps like Photoshop, InDesign, and Dreamweaver, facilitating a smooth workflow. Why Use Illustrator? Professional-Grade Features: Illustrator offers a comprehensive set of tools and features for professional design work. Versatility: It can be used for a wide range of design tasks and applications, making it a versatile tool for designers. Industry Standard: Illustrator is a widely used and recognized software in the graphic design industry. Creative Freedom: It empowers designers to create detailed, high-quality graphics with a high degree of control and precision.

Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Versionsaimabibi60507

Copy & Past Link👉👉 https://dr-up-community.info/ Pixologic ZBrush, now developed by Maxon, is a premier digital sculpting and painting software renowned for its ability to create highly detailed 3D models. Utilizing a unique "pixol" technology, ZBrush stores depth, lighting, and material information for each point on the screen, allowing artists to sculpt and paint with remarkable precision .

Why Orangescrum Is a Game Changer for Construction Companies in 2025Orangescrum

Designing AI-Powered APIs on Azure: Best Practices& ConsiderationsDinusha Kumarasiri

AI is transforming APIs, enabling smarter automation, enhanced decision-making, and seamless integrations. This presentation explores key design principles for AI-infused APIs on Azure, covering performance optimization, security best practices, scalability strategies, and responsible AI governance. Learn how to leverage Azure API Management, machine learning models, and cloud-native architectures to build robust, efficient, and intelligent API solutions

Adobe After Effects Crack FREE FRESH version 2025kashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe After Effects is a software application used for creating motion graphics, special effects, and video compositing. It's widely used in TV and film post-production, as well as for creating visuals for online content, presentations, and more. While it can be used to create basic animations and designs, its primary strength lies in adding visual effects and motion to videos and graphics after they have been edited. Here's a more detailed breakdown: Motion Graphics: . After Effects is powerful for creating animated titles, transitions, and other visual elements to enhance the look of videos and presentations. Visual Effects: . It's used extensively in film and television for creating special effects like green screen compositing, object manipulation, and other visual enhancements. Video Compositing: . After Effects allows users to combine multiple video clips, images, and graphics to create a final, cohesive visual. Animation: . It uses keyframes to create smooth, animated sequences, allowing for precise control over the movement and appearance of objects. Integration with Adobe Creative Cloud: . After Effects is part of the Adobe Creative Cloud, a suite of software that includes other popular applications like Photoshop and Premiere Pro. Post-Production Tool: . After Effects is primarily used in the post-production phase, meaning it's used to enhance the visuals after the initial editing of footage has been completed.

Revolutionizing Residential Wi-Fi PPT.pptxnidhisingh691197

LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYNidaFarooq10

Not So Common Memory Leaks in Java WebinarTier1 app

This SlideShare presentation is from our May webinar, “Not So Common Memory Leaks & How to Fix Them?”, where we explored lesser-known memory leak patterns in Java applications. Unlike typical leaks, subtle issues such as thread local misuse, inner class references, uncached collections, and misbehaving frameworks often go undetected and gradually degrade performance. This deck provides in-depth insights into identifying these hidden leaks using advanced heap analysis and profiling techniques, along with real-world case studies and practical solutions. Ideal for developers and performance engineers aiming to deepen their understanding of Java memory management and improve application stability.

Douwan Crack 2025 new verson+ License codeaneelaramzan63

Exploring Wayland: A Modern Display Server for the FutureICS

Solidworks Crack 2025 latest new + license codeaneelaramzan63

How can one start with crypto wallet development.pptxlaravinson24

Explaining GitHub Actions Failures with Large Language Models Challenges, In...ssuserb14185

GitHub Actions (GA) has become the de facto tool that developers use to automate software workflows, seamlessly building, testing, and deploying code. Yet when GA fails, it disrupts development, causing delays and driving up costs. Diagnosing failures becomes especially challenging because error logs are often long, complex and unstructured. Given these difficulties, this study explores the potential of large language models (LLMs) to generate correct, clear, concise, and actionable contextual descriptions (or summaries) for GA failures, focusing on developers’ perceptions of their feasibility and usefulness. Our results show that over 80% of developers rated LLM explanations positively in terms of correctness for simpler/small logs. Overall, our findings suggest that LLMs can feasibly assist developers in understanding common GA errors, thus, potentially reducing manual analysis. However, we also found that improved reasoning abilities are needed to support more complex CI/CD scenarios. For instance, less experienced developers tend to be more positive on the described context, while seasoned developers prefer concise summaries. Overall, our work offers key insights for researchers enhancing LLM reasoning, particularly in adapting explanations to user expertise. https://arxiv.org/abs/2501.16495

FL Studio Producer Edition Crack 2025 Full Versiontahirabibi60507

Adobe Marketo Engage Champion Deep Dive - SFDC CRM Synch V2 & Usage DashboardsBradBedford3

Join Ajay Sarpal and Miray Vu to learn about key Marketo Engage enhancements. Discover improved in-app Salesforce CRM connector statistics for easy monitoring of sync health and throughput. Explore new Salesforce CRM Synch Dashboards providing up-to-date insights into weekly activity usage, thresholds, and limits with drill-down capabilities. Learn about proactive notifications for both Salesforce CRM sync and product usage overages. Get an update on improved Salesforce CRM synch scale and reliability coming in Q2 2025. Key Takeaways: Improved Salesforce CRM User Experience: Learn how self-service visibility enhances satisfaction. Utilize Salesforce CRM Synch Dashboards: Explore real-time weekly activity data. Monitor Performance Against Limits: See threshold limits for each product level. Get Usage Over-Limit Alerts: Receive notifications for exceeding thresholds. Learn About Improved Salesforce CRM Scale: Understand upcoming cloud-based incremental sync.

Proactive Vulnerability Detection in Source Code Using Graph Neural Networks:...Ranjan Baisak

As software complexity grows, traditional static analysis tools struggle to detect vulnerabilities with both precision and context—often triggering high false positive rates and developer fatigue. This article explores how Graph Neural Networks (GNNs), when applied to source code representations like Abstract Syntax Trees (ASTs), Control Flow Graphs (CFGs), and Data Flow Graphs (DFGs), can revolutionize vulnerability detection. We break down how GNNs model code semantics more effectively than flat token sequences, and how techniques like attention mechanisms, hybrid graph construction, and feedback loops significantly reduce false positives. With insights from real-world datasets and recent research, this guide shows how to build more reliable, proactive, and interpretable vulnerability detection systems using GNNs.

Automation Techniques in RPA - UiPath CertificateVICTOR MAESTRE RAMIREZ

Adobe Lightroom Classic Crack FREE Latest link 2025kashifyounis067

🌍📱👉COPY LINK & PASTE ON GOOGLE http://drfiles.net/ 👈🌍 Adobe Lightroom Classic is a desktop-based software application for editing and managing digital photos. It focuses on providing users with a powerful and comprehensive set of tools for organizing, editing, and processing their images on their computer. Unlike the newer Lightroom, which is cloud-based, Lightroom Classic stores photos locally on your computer and offers a more traditional workflow for professional photographers. Here's a more detailed breakdown: Key Features and Functions: Organization: Lightroom Classic provides robust tools for organizing your photos, including creating collections, using keywords, flags, and color labels. Editing: It offers a wide range of editing tools for making adjustments to color, tone, and more. Processing: Lightroom Classic can process RAW files, allowing for significant adjustments and fine-tuning of images. Desktop-Focused: The application is designed to be used on a computer, with the original photos stored locally on the hard drive. Non-Destructive Editing: Edits are applied to the original photos in a non-destructive way, meaning the original files remain untouched. Key Differences from Lightroom (Cloud-Based): Storage Location: Lightroom Classic stores photos locally on your computer, while Lightroom stores them in the cloud. Workflow: Lightroom Classic is designed for a desktop workflow, while Lightroom is designed for a cloud-based workflow. Connectivity: Lightroom Classic can be used offline, while Lightroom requires an internet connection to sync and access photos. Organization: Lightroom Classic offers more advanced organization features like Collections and Keywords. Who is it for? Professional Photographers: PCMag notes that Lightroom Classic is a popular choice among professional photographers who need the flexibility and control of a desktop-based application. Users with Large Collections: Those with extensive photo collections may prefer Lightroom Classic's local storage and robust organization features. Users who prefer a traditional workflow: Users who prefer a more traditional desktop workflow, with their original photos stored on their computer, will find Lightroom Classic a good fit.

Expand your AI adoption with AgentExchangeFexle Services Pvt. Ltd.

Landscape of Requirements Engineering for/by AI through Literature ReviewHironori Washizaki

Adobe Illustrator Crack FREE Download 2025 Latest Versionkashifyounis067

Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Versionsaimabibi60507

Why Orangescrum Is a Game Changer for Construction Companies in 2025Orangescrum

Designing AI-Powered APIs on Azure: Best Practices& ConsiderationsDinusha Kumarasiri

Adobe After Effects Crack FREE FRESH version 2025kashifyounis067

Revolutionizing Residential Wi-Fi PPT.pptxnidhisingh691197

LEARN SEO AND INCREASE YOUR KNOWLDGE IN SOFTWARE INDUSTRYNidaFarooq10

Not So Common Memory Leaks in Java WebinarTier1 app

Douwan Crack 2025 new verson+ License codeaneelaramzan63

Exploring Wayland: A Modern Display Server for the FutureICS

Solidworks Crack 2025 latest new + license codeaneelaramzan63

How can one start with crypto wallet development.pptxlaravinson24

Explaining GitHub Actions Failures with Large Language Models Challenges, In...ssuserb14185

FL Studio Producer Edition Crack 2025 Full Versiontahirabibi60507

Adobe Marketo Engage Champion Deep Dive - SFDC CRM Synch V2 & Usage DashboardsBradBedford3

Proactive Vulnerability Detection in Source Code Using Graph Neural Networks:...Ranjan Baisak

Automation Techniques in RPA - UiPath CertificateVICTOR MAESTRE RAMIREZ

Adobe Lightroom Classic Crack FREE Latest link 2025kashifyounis067

Render-as-You-Fetch

1. RENDER-AS-YOU-FETCH DEEP DIVE INTO CONCURRENT MODE A GENTLE INTRODUCTION TO CONCURRENT MODE

2. A FRESH DESIGNE THE FACEBOOK

3. THE FACEBOOK - DARK MODE

4. HOW TO ENABLE CONCURRENT MODE NPM I (BECAUSE "INSTALL" IS TOO MUCH TO TYPE)

5. HOW TO ENABLE CONCURRENT MODE THEN…

6. HOW TO ENABLE CONCURRENT MODE NOW…

7. BACK TO THE FUTURE REACT’S CORE ALGORITHM

8. BACK TO THE FUTURE REACT’S CORE ALGORITHM

9. RENDERERS HTTPS://GITHUB.COM/CHENTSULIN/AWESOME-REACT-RENDERER • react-dom - A declarative, efficient, and flexible JavaScript library for building user interfaces. • react-tiny-dom - A minimal implementation of react-dom using react-reconciler • react-art - React Bridge to the ART Drawing Library. • react-canvas - High performance canvas rendering for React components. • react-pixi-fiber - Write PixiJS applications using React declarative style. • react-three - React bindings to create and control a 3D scene using three.js. • React-GL - Render React components in WebGL for 60 FPS animations. • ReactLiberty - Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer. • react-vr - Render React components in WebGL/WebVR for VR apps. • react-konsul - A react renderer that renders to the browser's devtools console. • react-worker-dom - Experiments to see the advantages of using Web Workers to Render React Virtual DOM. • rax - A universal React-compatible render engine. • react-native-dom An experimental, comprehensive port of React Native to the web. • proton-native - A React environment for cross platform native desktop apps. • stain - [beta] rapid GUI development using familiar technologies (fat-free electron). • React NodeGUI - Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling. 🚀 • react-gtk - React Native renderer for gtk powered cross platform desktop applications that run on OSX, Linux and Windows. • react-qml - Build native, high-performance, cross-platform applications (desktop and mobile) through a React (and/or QML) syntax. • react-native - A framework for building native apps with React. • react-titanium - React custom renderer for Appcelerator® Titanium™ SDK. • react-blessed - A react renderer for blessed. • ink - React for interactive command-line apps. • react-cli - a react renderer for the command line.

10. LIFECYCLE METHODS (START, STOP, RESTART) LEGACY ▸ Virtual DOM (render phase) constructors componentWillMount componentWillReceiveProps shouldComponentUpdate render ▸ Real DOM (commit phase) componentDidMount componentDidUpdate componentWIllUnmount

11. LIFECYCLE METHODS (START, STOP, RESTART) MODERN ▸ Virtual DOM (render phase) constructors getDerivedStateFromProps shouldComponentUpdate render ▸ Real DOM (commit phase) componentDidMount componentDidUpdate componentWIllUnmount

12. HOOKS USE YOUR HOOKS, LUKE

13. HOOKS VS CLASSES? CLASSES? JAVASCRIPT? REACT?

14. DEMO DEMO DEMO

15. COMPONENTS SUSPENSE ▸ Fallback (component)

16. COMPONENTS SUSPENSE LIST ▸ revealOrder (forwards, backwards, together) ▸ tail (collapsed, hidden) (not with together)

17. DEMO 2 DEMO 2 DEMO: EPISODE 2 - ATTACK OF THE CLONES (OF SUSPENSE LISTS)

18. HOOKS useTransition

19. HOOKS useDeferredValue

20. FETCH DATA FETCH-0N-RENDER

21. FETCH DATA FETCH-THEN-RENDER

22. FETCH DATA RENDER-AS-YOU-FETCH

23. FETCH DATA RACE CONDITIONS