Wii Ruby All Work And No Play Just Wont DoLittleBIGRuby
This document discusses using a Wii remote with Ruby code to create interactive programs. It provides an overview of the necessary hardware, libraries for connecting to the Wii remote from Ruby like WiiUseJRuby, and the Monkeybars GUI library. It also demonstrates example code for mapping button presses and motion data to methods, and includes demos of using the Wii remote for MIDI music and motion plotting. The document encourages an exploratory approach to programming with the Wii remote.
The document discusses different animation techniques for Android, including property animation, view animation, object animator, view property animator, value animator, and physics-based animation using the support library. It provides code examples for creating animations that change the alpha, scale, rotation, and translation of views. It also covers using interpolators, listeners, spring animations, and fling animations to control the motion and timing of animations.
Slides from my talk at React meetup @ Cloudinary offices Nov 26, 2018
The Presentation showed performance pitfalls in React apps and how to find and then solve them
The document discusses React.js and its uses beyond just web browsers. It explains how React can be used to build mobile apps with React Native, render to canvases instead of the DOM, and even be adapted to run on devices like smartwatches. Examples are given of React being used on Canvas, in React Native apps, and modified to work on a smartwatch. The document argues React's versatility and the ability to "learn once, write anywhere" enable it to be applied in many environments beyond just the browser.
This document provides an overview of how to build applications with React Native. It discusses React Native's core components like React, ReactDOM and React Native. It also covers topics like JavaScript implementation, building components, styles, platform specific code, animations, navigation libraries and working with data using Redux.
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
This document discusses various techniques for working with multimedia in Android applications, including detecting device capabilities, loading images from local storage and remote URLs, playing audio files from assets and raw resources, and improving performance through caching and asynchronous loading. It provides code examples for checking if a device has a front-facing camera, loading images while avoiding out of memory errors, playing audio files from assets, and using an AsyncTask to load images asynchronously to avoid blocking the UI. It also discusses potential memory leak issues and strategies for building an image cache.
Wii Ruby All Work And No Play Just Wont DoLittleBIGRuby
This document discusses using a Wii remote with Ruby code to create interactive programs. It provides an overview of the necessary hardware, libraries for connecting to the Wii remote from Ruby like WiiUseJRuby, and the Monkeybars GUI library. It also demonstrates example code for mapping button presses and motion data to methods, and includes demos of using the Wii remote for MIDI music and motion plotting. The document encourages an exploratory approach to programming with the Wii remote.
The document discusses different animation techniques for Android, including property animation, view animation, object animator, view property animator, value animator, and physics-based animation using the support library. It provides code examples for creating animations that change the alpha, scale, rotation, and translation of views. It also covers using interpolators, listeners, spring animations, and fling animations to control the motion and timing of animations.
Slides from my talk at React meetup @ Cloudinary offices Nov 26, 2018
The Presentation showed performance pitfalls in React apps and how to find and then solve them
The document discusses React.js and its uses beyond just web browsers. It explains how React can be used to build mobile apps with React Native, render to canvases instead of the DOM, and even be adapted to run on devices like smartwatches. Examples are given of React being used on Canvas, in React Native apps, and modified to work on a smartwatch. The document argues React's versatility and the ability to "learn once, write anywhere" enable it to be applied in many environments beyond just the browser.
This document provides an overview of how to build applications with React Native. It discusses React Native's core components like React, ReactDOM and React Native. It also covers topics like JavaScript implementation, building components, styles, platform specific code, animations, navigation libraries and working with data using Redux.
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
This document discusses various techniques for working with multimedia in Android applications, including detecting device capabilities, loading images from local storage and remote URLs, playing audio files from assets and raw resources, and improving performance through caching and asynchronous loading. It provides code examples for checking if a device has a front-facing camera, loading images while avoiding out of memory errors, playing audio files from assets, and using an AsyncTask to load images asynchronously to avoid blocking the UI. It also discusses potential memory leak issues and strategies for building an image cache.
This document discusses Paging 3, a library for Android that helps load and display small chunks of data from network or local storage in an efficient way. It provides concise summaries of key points:
Paging 3 was a complete rewrite of the paging library using coroutines to make error handling easier and support list transformations. It allows displaying data in pages to efficiently use network bandwidth and system resources. The library is designed to fit into the Android architecture.
The document outlines the history and benefits of the paging library. It describes using PagingSources to load data from a single source and RemoteMediators to load from remote APIs and save to local storage. It shows how to provide paged data to
Oxygine 2 d objects,events,debug and resourcescorehard_by
Доклад будет посвящен созданию/удалению и взаимодействию игровых объектах, о стандартных и кастомизированных смартпоинтерах. Какими вещами пользоваться чтобы получить debug информацию о том что происходит в игре. Будут приведены примеры шаблонов игрового проектирования. Несколько слов о интересных редакторах игровых ресурсов: MapEditor.com, Astralax.ru
This document discusses A-Frame, an open-source web framework for building virtual reality experiences. It outlines the goals of the Mozilla VR team to bring high performance VR to the web. It then summarizes the basics of A-Frame, including how it uses entities and components to build scenes, and supports primitives, animation, and mixins to facilitate development. Platform support is discussed, with A-Frame currently supporting various VR and mobile browsers through different VR APIs and polyfills. The document aims to introduce developers to A-Frame for rapidly creating WebVR content that can run across platforms.
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
"Use Component Drivers to Control Components in Tests", Roman Shevchuk Fwdays
Often tests begin to look like a set of hard-to-maintain selectors, data selection logic, and user event simulation features. Writing each new test becomes just a "copy-paste", and changing one component requires changing a large number of integration and E2E tests. The solution to make the logic control components separately in the driver. The path from such a test to the fact that each component will have its own driver in which all the logic of component management will be encapsulated.
The document discusses React features including fragments for flattening component hierarchy, component return types allowing arrays or strings, simplified component lifecycle with error handling, context for passing data to children without props, portals for rendering outside the root node, and improved refs with forwarding and createRef.
The document discusses techniques for writing clean JavaScript code. It provides examples of code smells and improvements to address issues like attaching events from the outside, separating selection from logic, shallow scope, overwriting default behavior, and separating logic from views. The document advocates for practices like modularizing functions, separating DOM manipulation from models, and creating model objects to represent DOM elements rather than directly manipulating the DOM. It encourages learning clean JavaScript techniques to write better structured and more maintainable code.
В презентации описаны лучшие практики использования библиотеки React в связке с Redux. Быстрое разворачивание SPA без настройки Webpack и Babel с помощью утилиты Create React App, Smart and Dumb, Stateful and Stateless Components, управление рендером с помощью shouldComponentUpdate, Redux модули, мемоизация и middlewares.
More useful info on our:
- website: https://clickky.biz
- blog: https://clickky.biz/blog
Sign up!
Incremental Type Safety in React Apollo Evans Hauser
This document discusses adding Reason to an existing React/Apollo project to gain the benefits of strong typing. It demonstrates defining a GraphQL query to fetch promoted post data, creating Reason components to render the data, and using ReasonReact and Apollo to connect the components to the query. The end result is clear separation of concerns between the UI logic in Reason and the data fetching logic in GraphQL.
An adapter is used to connect data from a data source to views in an AdapterView like a ListView. The adapter provides the views for each item in the data set by inflating a layout. To create a list with images, you make a custom ArrayAdapter subclass that overrides getView() to set the text and image for each item based on its name. You provide layout XML for each list item and start a ListActivity to display the list.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Design Patterns for Tablets and SmartphonesMichael Galpin
This is a talk I gave at AnDevCon. It talks about ways to take advantage of features introduced in Android 3.0 to create more modular and better looking apps.
This document summarizes advanced React patterns discussed by Robert Herbst in his presentation. It covers:
1. Presentational and container components, with presentational components being pure and unaware of Redux state while container components connect to Redux.
2. Other patterns like child-aware components that interrogate child components, service injection components for context, and styled components that generate styles.
3. The document argues that components should be separated into pure and side effect categories for simplicity, testability, and composability, even as Hooks make side effects easier to incorporate into components.
The Mobile Vision API provides a framework for recognizing objects in photos and videos. The framework includes detectors, which locate and describe visual objects in images or video frames, and an event-driven API that tracks the position of those objects in video.
This document discusses various technologies used in a software project including Node.js, React, Redux, MySQL, and more. It also covers React-specific topics such as lifecycle methods, rendering, AJAX calls, and using Redux to manage state across components. Code snippets demonstrate techniques like binding event handlers and updating state after props change.
The document discusses using the Lithium PHP framework to build a photo blog application. It provides examples of defining a Photos model to interact with photo data, building views to display and edit photos, implementing a PhotosController to handle requests and define actions, and setting routes. The model saves photo data and tags to the database. Views are used to display photo details, edit forms, and render tags as links. The controller handles index, view, add, edit and nearby location based actions. Routes are also defined, including one to directly serve photo image files.
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
DDS Security Version 1.2 was adopted in 2024. This revision strengthens support for long runnings systems adding new cryptographic algorithms, certificate revocation, and hardness against DoS attacks.
This document discusses Paging 3, a library for Android that helps load and display small chunks of data from network or local storage in an efficient way. It provides concise summaries of key points:
Paging 3 was a complete rewrite of the paging library using coroutines to make error handling easier and support list transformations. It allows displaying data in pages to efficiently use network bandwidth and system resources. The library is designed to fit into the Android architecture.
The document outlines the history and benefits of the paging library. It describes using PagingSources to load data from a single source and RemoteMediators to load from remote APIs and save to local storage. It shows how to provide paged data to
Oxygine 2 d objects,events,debug and resourcescorehard_by
Доклад будет посвящен созданию/удалению и взаимодействию игровых объектах, о стандартных и кастомизированных смартпоинтерах. Какими вещами пользоваться чтобы получить debug информацию о том что происходит в игре. Будут приведены примеры шаблонов игрового проектирования. Несколько слов о интересных редакторах игровых ресурсов: MapEditor.com, Astralax.ru
This document discusses A-Frame, an open-source web framework for building virtual reality experiences. It outlines the goals of the Mozilla VR team to bring high performance VR to the web. It then summarizes the basics of A-Frame, including how it uses entities and components to build scenes, and supports primitives, animation, and mixins to facilitate development. Platform support is discussed, with A-Frame currently supporting various VR and mobile browsers through different VR APIs and polyfills. The document aims to introduce developers to A-Frame for rapidly creating WebVR content that can run across platforms.
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
"Use Component Drivers to Control Components in Tests", Roman Shevchuk Fwdays
Often tests begin to look like a set of hard-to-maintain selectors, data selection logic, and user event simulation features. Writing each new test becomes just a "copy-paste", and changing one component requires changing a large number of integration and E2E tests. The solution to make the logic control components separately in the driver. The path from such a test to the fact that each component will have its own driver in which all the logic of component management will be encapsulated.
The document discusses React features including fragments for flattening component hierarchy, component return types allowing arrays or strings, simplified component lifecycle with error handling, context for passing data to children without props, portals for rendering outside the root node, and improved refs with forwarding and createRef.
The document discusses techniques for writing clean JavaScript code. It provides examples of code smells and improvements to address issues like attaching events from the outside, separating selection from logic, shallow scope, overwriting default behavior, and separating logic from views. The document advocates for practices like modularizing functions, separating DOM manipulation from models, and creating model objects to represent DOM elements rather than directly manipulating the DOM. It encourages learning clean JavaScript techniques to write better structured and more maintainable code.
В презентации описаны лучшие практики использования библиотеки React в связке с Redux. Быстрое разворачивание SPA без настройки Webpack и Babel с помощью утилиты Create React App, Smart and Dumb, Stateful and Stateless Components, управление рендером с помощью shouldComponentUpdate, Redux модули, мемоизация и middlewares.
More useful info on our:
- website: https://clickky.biz
- blog: https://clickky.biz/blog
Sign up!
Incremental Type Safety in React Apollo Evans Hauser
This document discusses adding Reason to an existing React/Apollo project to gain the benefits of strong typing. It demonstrates defining a GraphQL query to fetch promoted post data, creating Reason components to render the data, and using ReasonReact and Apollo to connect the components to the query. The end result is clear separation of concerns between the UI logic in Reason and the data fetching logic in GraphQL.
An adapter is used to connect data from a data source to views in an AdapterView like a ListView. The adapter provides the views for each item in the data set by inflating a layout. To create a list with images, you make a custom ArrayAdapter subclass that overrides getView() to set the text and image for each item based on its name. You provide layout XML for each list item and start a ListActivity to display the list.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Design Patterns for Tablets and SmartphonesMichael Galpin
This is a talk I gave at AnDevCon. It talks about ways to take advantage of features introduced in Android 3.0 to create more modular and better looking apps.
This document summarizes advanced React patterns discussed by Robert Herbst in his presentation. It covers:
1. Presentational and container components, with presentational components being pure and unaware of Redux state while container components connect to Redux.
2. Other patterns like child-aware components that interrogate child components, service injection components for context, and styled components that generate styles.
3. The document argues that components should be separated into pure and side effect categories for simplicity, testability, and composability, even as Hooks make side effects easier to incorporate into components.
The Mobile Vision API provides a framework for recognizing objects in photos and videos. The framework includes detectors, which locate and describe visual objects in images or video frames, and an event-driven API that tracks the position of those objects in video.
This document discusses various technologies used in a software project including Node.js, React, Redux, MySQL, and more. It also covers React-specific topics such as lifecycle methods, rendering, AJAX calls, and using Redux to manage state across components. Code snippets demonstrate techniques like binding event handlers and updating state after props change.
The document discusses using the Lithium PHP framework to build a photo blog application. It provides examples of defining a Photos model to interact with photo data, building views to display and edit photos, implementing a PhotosController to handle requests and define actions, and setting routes. The model saves photo data and tags to the database. Views are used to display photo details, edit forms, and render tags as links. The controller handles index, view, add, edit and nearby location based actions. Routes are also defined, including one to directly serve photo image files.
Similar to React Responsively, Render Responsibly (19)
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
DDS Security Version 1.2 was adopted in 2024. This revision strengthens support for long runnings systems adding new cryptographic algorithms, certificate revocation, and hardness against DoS attacks.
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
Most important New features of Oracle 23c for DBAs and Developers. You can get more idea from my youtube channel video from https://youtu.be/XvL5WtaC20A
E-commerce Development Services- Hornet DynamicsHornet Dynamics
For any business hoping to succeed in the digital age, having a strong online presence is crucial. We offer Ecommerce Development Services that are customized according to your business requirements and client preferences, enabling you to create a dynamic, safe, and user-friendly online store.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Artificia Intellicence and XPath Extension FunctionsOctavian Nadolu
The purpose of this presentation is to provide an overview of how you can use AI from XSLT, XQuery, Schematron, or XML Refactoring operations, the potential benefits of using AI, and some of the challenges we face.
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j
Dr. Jesús Barrasa, Head of Solutions Architecture for EMEA, Neo4j
Découvrez les dernières innovations de Neo4j, et notamment les dernières intégrations cloud et les améliorations produits qui font de Neo4j un choix essentiel pour les développeurs qui créent des applications avec des données interconnectées et de l’IA générative.
Do you want Software for your Business? Visit Deuglo
Deuglo has top Software Developers in India. They are experts in software development and help design and create custom Software solutions.
Deuglo follows seven steps methods for delivering their services to their customers. They called it the Software development life cycle process (SDLC).
Requirement — Collecting the Requirements is the first Phase in the SSLC process.
Feasibility Study — after completing the requirement process they move to the design phase.
Design — in this phase, they start designing the software.
Coding — when designing is completed, the developers start coding for the software.
Testing — in this phase when the coding of the software is done the testing team will start testing.
Installation — after completion of testing, the application opens to the live server and launches!
Maintenance — after completing the software development, customers start using the software.
Measures in SQL (SIGMOD 2024, Santiago, Chile)Julian Hyde
SQL has attained widespread adoption, but Business Intelligence tools still use their own higher level languages based upon a multidimensional paradigm. Composable calculations are what is missing from SQL, and we propose a new kind of column, called a measure, that attaches a calculation to a table. Like regular tables, tables with measures are composable and closed when used in queries.
SQL-with-measures has the power, conciseness and reusability of multidimensional languages but retains SQL semantics. Measure invocations can be expanded in place to simple, clear SQL.
To define the evaluation semantics for measures, we introduce context-sensitive expressions (a way to evaluate multidimensional expressions that is consistent with existing SQL semantics), a concept called evaluation context, and several operations for setting and modifying the evaluation context.
A talk at SIGMOD, June 9–15, 2024, Santiago, Chile
Authors: Julian Hyde (Google) and John Fremlin (Google)
https://doi.org/10.1145/3626246.3653374
Transform Your Communication with Cloud-Based IVR SolutionsTheSMSPoint
Discover the power of Cloud-Based IVR Solutions to streamline communication processes. Embrace scalability and cost-efficiency while enhancing customer experiences with features like automated call routing and voice recognition. Accessible from anywhere, these solutions integrate seamlessly with existing systems, providing real-time analytics for continuous improvement. Revolutionize your communication strategy today with Cloud-Based IVR Solutions. Learn more at: https://thesmspoint.com/channel/cloud-telephony
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j
Dr. Jesús Barrasa, Head of Solutions Architecture for EMEA, Neo4j
Découvrez les dernières innovations de Neo4j, et notamment les dernières intégrations cloud et les améliorations produits qui font de Neo4j un choix essentiel pour les développeurs qui créent des applications avec des données interconnectées et de l’IA générative.
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Łukasz Chruściel
No one wants their application to drag like a car stuck in the slow lane! Yet it’s all too common to encounter bumpy, pothole-filled solutions that slow the speed of any application. Symfony apps are not an exception.
In this talk, I will take you for a spin around the performance racetrack. We’ll explore common pitfalls - those hidden potholes on your application that can cause unexpected slowdowns. Learn how to spot these performance bumps early, and more importantly, how to navigate around them to keep your application running at top speed.
We will focus in particular on tuning your engine at the application level, making the right adjustments to ensure that your system responds like a well-oiled, high-performance race car.
What is Augmented Reality Image Trackingpavan998932
Augmented Reality (AR) Image Tracking is a technology that enables AR applications to recognize and track images in the real world, overlaying digital content onto them. This enhances the user's interaction with their environment by providing additional information and interactive elements directly tied to physical images.
3. React Responsively, Render Responsibly Yoav Niran
A little about me
Yoav Niran
Senior front-end developer @ Cloudinary
The Media Full Stack
Heavy-duty image & video platform
@poeticGeek
10. React Responsively, Render Responsibly Yoav Niran
The road to performance
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
17. React Responsively, Render Responsibly Yoav Niran
The Journey
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
23. React Responsively, Render Responsibly Yoav Niran
The Journey
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
30. React Responsively, Render Responsibly Yoav Niran
Memoization
“...memoization or memoisation is an optimization technique used
primarily to speed up computer programs by storing the results of
expensive function calls and returning the cached result when the same
inputs occur again…”
https://en.wikipedia.org/wiki/Memoization
Memoization
32. React Responsively, Render Responsibly Yoav Niran
The Journey
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
40. React Responsively, Render Responsibly Yoav Niran
The Journey
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
41. React Responsively, Render Responsibly Yoav Niran
Clue #5 – Letting it all out
class PhotosGrid extends Component {
render() {
...
return (
<div className={cx(styles.container, "...")}>
...
{photos.map((id) => (
<PhotoItem
key={id}
id={id}/>
))}
</div>
);}}
...
PhotosGrid/PhotosGrid.js
42. React Responsively, Render Responsibly Yoav Niran
Fix #5 – Open a window
https://bvaughn.github.io/forward-js-2017
43. React Responsively, Render Responsibly Yoav Niran
Fix #5 – Open a window
https://react-window.now.sh
https://github.com/bvaughn/react-window
49. React Responsively, Render Responsibly Yoav Niran
The road to performance
1. Data go low
2. Time to leave the nest
3. Spread the love props
4. Just Memoize It TM
5. Open a Window
51. React Responsively, Render Responsibly Yoav Niran
Thank y u
https://github.com/yoavniran/react-performance-demo
@poeticGeek
Editor's Notes
Who here thinks about performance throughout their dev process. And not just when things start to go wrong?
Performance is a tricky businessWe certainly dont want to over-do it but usually we dont even think about it until its really bad and users start to feel the pain
How many here had to re-work their app after serious performance issues were discovered? It isnt pleasant right?
For the purpose of this talk I built this small app that lets me view photos from my Cloudinary account.
At cloudinary we put a big emphasis on delivering high quality media with efficiency and performance. Its a big reason our customers rely on us to deliver media to their web and mobile apps.
As a consequence we take performance very seriously in the apps we build ourselves
In the next 14 minutes or so Id like to show how its possible to quickly get a sense of what is causing slowdowns in your react app and what can be done to fix it.
The app is roughly made out of this component structure
we’ll focus on the PhotosGrid and PhotoItems which are going to prove as performance bottlenecks
Live demo - Show the app and the performance issues
Obviously this is a problem. Selecting one item shouldnt cause this many components to re-render each time. We already see a considerable slowdown with only several hundreds items in the dom. Consider what will happen if we had thousands.
Our click handler is now taking several hundreds of milliseconds to complete. And this is on a strong machine.We really want to be down to just a few tenth of milliseconds at the most or we start to interfere with the browser’s ability to respond quickly to events while also doing its job of running callbacks, doing repaints, reflow, etc. Ideally we would like to keep our interactions at below 16 ms to hit that 60 fps sweetspot.
So this is where we are now and this is where we should end up with
the 5 areas well concentrate on In order to get to our goal
Quick word about how the app’s state is structured.
I have a photos array and in it each object represents a photo item.
In my photos grid component im now getting the entire photos collection
Then im iterating over it and passing the data down to the photo item
But I don’t need all this data at the grid level. So lets refactor so we’re only getting the ids instead
Now we just pass the id to the photo item component and let it do its own selection
This way were moving the data use down the component tree
And in my photo item I added a selector that uses the id it gets to retrieve the photo’s data
Moving the data selection to the photo item instead of the photos grid
The photos grid is still re-rendering and so are all the Photo items
Simply moving the selection of the photo items from our PhotosGrid component wasnt enough.
Notice that the selected flag is stored inside, nested in the photos array
Im using an Immutable data structure
every selection action is updating the nested object
immutable data means its going to create a new object each time.
The issue is of course that changing our state like this can cause every component that relies on this data structure to re-render if were not careful
Separating out the selected state to its own array should ensure that the grid doesn’t simply re-render every time a selection is made
Ok. we’re making progress - PhotosGrid isnt re-rendering. Thats good
But why are all the photo items still re-rendering? This isnt supposed to happen right?
We must remember that both React’s PureComponent and by default Connect from react-redux do a shallow compare on the props sent to our component.
This means that its doing a strict equal on only the first level of the props object.
Our selector currently creates a new prop called “Item” every time our photos array in the app’s state changes and the strict equality check will find its not equal to the previous update
We fix this problem by spreading the Item’s properties into the props we send down to our component.
Now whether its PureComponent or Connect that does the comparison they should find that for all other components nothing changed except for the one photo we selected.
Demo spreading the props in the photo item
Congratulations. Great job! We did it. Or did we?
We got rid of all that unnecessary rendering but i have a sense something isnt completely right yet. Call it a hunch.
Lets use the dev tools performance tab again to take a look at what is going on after we click an item
There are several good memoization libraries out there that can help us do this right. However I prefer Reselect because it does this by default while supporting more advanced usage such as selector composition.
We use Reselect’s createSelector method which accepts other selectors as the building blocks for our selector. In Reselect every selector is memoized so in case the input it receives is the same as before, that function will not be called again and its previous results will be used.
Notice that I create a new selector for every PhotoItem component
Since React is going to render multiple PhotoItem component instances.
Each of those will need its own memoized selector for the caching to work
Demo memoization in place
I promised that we’ll get down to around 16ms and were still several times slower than that
however We’ve done all we can for the photo item component
there is another area we need to look at in order to improve our performance and thats the grid itself
lets take a look at what happens when we go from our photo view back to the grid
what we can see here is that we're naively rendering the entire photo collection whether we have just a few or thousands.
All of them will be rendered to the dom at once!
We need to take a windowing (virtualize) approach which means well only render the items that the user sees
And a few before and after to support a smooth scrolling experience
This prevents us from rendering the entire collection to the dom
Instead of rendering the entire collection we use the fixed sized grid from react-window to render the items
Theres a little more coding involved but its well worth it
Lastly - Lets take a look at our photo select handler once the windowing technique in place.
Lastly - Lets take a look at our photo select handler once the windowing technique in place.
Lets review -
We moved selecting data down the tree
We’ve un-nested our data structure
We’ve spread our props to help shallow compare
We memoized our selector
And we’ve added a window
We did it ! We’re down from around 600 ms to only 10 !!!!!!!