Presentation discusses the best practices when writing higher order components (HOCs), and presents examples how to write them according to React recommendations.
Topics include: maximizing HOC factories composability, using ES7 decorators, wrapping context DI in HOCs, handling async state changes using RxJS Observanels and separation of concerns between presentation and business logic components. Examples (@GitHub projects - referenced in the presentation) are given using react, redux, react-router-redux, redux-observable, recompose, and reselect.
Front End Development for Back End Java Developers - West Midlands Java User ...Matt Raible
Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).
Front End Development for Back End Java Developers - South West Java 2019Matt Raible
Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...Edureka!
This Edureka ReactJS Tutorial For Beginners will help you in understanding the fundamentals of ReactJS and help you in building a strong foundation in React framework. Below are the topics covered in this tutorial:
1. Why ReactJS?
2. What Is ReactJS?
3. Advantages Of ReactJS
4. ReactJS Installation and Program
5. ReactJS Fundamentals
Front End Development for Back End Java Developers - Dublin JUG 2019Matt Raible
Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).
The document discusses rapid prototyping concepts using Vue.js. It covers Overvue, a play on words for "over view" of Vue, Vue components, and wrapping up. It then discusses benefits of rapid prototyping like focus on interactions, stakeholder expectations, and feasibility determination. Next, it covers Vue installation, directives, single file components, and prototyping levels from components to pages. Finally, it discusses Gridsome and Strapi for data sources and wraps up with quotes on speed over aesthetics and building prototypes, not unfinished products.
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020Matt Raible
You have streaming data and want to expose it as reactive streams with Spring Boot. Great! Spring WebFlux makes that pretty easy. But what about the UI? Can you stream that data to the UI and have it be reactive and constantly updating too?
This session explores techniques for making your app fully reactive with Spring WebFlux and React. Mostly live coding, with plenty of time for Q & A in the midst of it all.
* Blog post: https://bit.ly/webflux-and-react
* Screencast: https://youtu.be/1xpwYe154Ys
Copy of the slides from the Advanced Web Development Workshop presented by Ed Bachta, Charlie Moad and Robert Stein of the Indianapolis Museum of Art during the Museums and the Web 2008 conference in Montreal
This document provides an introduction to ReactJS, including:
- Why React is simple, declarative, and allows building of composable components
- React's popularity, with over 900,000 downloads in the last month
- How React addresses issues with traditional web development through its use of virtual DOM and componentization
- An example component is demonstrated to show how to: render in JSX, make components dynamic and interactive through props and event handling, access the DOM through refs, and manage state.
The Best Guide to Know What, Why, When to Use Is ReactJSWeblineIndia
We have prepared this guide for people who are starting with React. Read the complete post to know what, why, when to use ReactJS. Read more https://www.weblineindia.com/blog/everything-you-should-know-about-reactjs/
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019Matt Raible
You have streaming data and want to expose it as reactive streams with Spring Boot. Great!
Spring WebFlux makes that pretty easy. But what about the UI? Can you stream that data to the UI and have it be reactive and constantly updating too?
This session explores techniques for making your app fully reactive with Spring WebFlux and React. Mostly live coding, with plenty of time for Q & A in the midst of it all.
* Blog post: https://developer.okta.com/blog/2018/09/25/spring-webflux-websockets-react
* Screencast: https://youtu.be/1xpwYe154Ys
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
I am pleased to present you with this PDF that offers an in-depth perspective on some of my experiences, skills and approach in the development world.
This PDF takes an Exclusive Interview approach, aimed at uncovering key details of my career path.
JHipster is one of those open-source projects you stumble upon and immediately think, "Of course!" It combines three very successful frameworks in web development: Bootstrap, Angular, and Spring Boot. Bootstrap was one of the first dominant web-component frameworks. Its largest appeal was that it only required a bit of HTML and it worked! All the efforts we made in the Java community to develop web components were shown a better path by Bootstrap. It leveled the playing field in HTML/CSS development, much like Apple's Human Interface Guidelines did for iOS apps.
This talk shows you how to use JHipster to build a Spring Boot API, an Angular UI, and make it all look good with Bootstrap. You'll learn how to deploy the generated project to Heroku too!
Front End Development for Back End Developers - vJUG24 2017Matt Raible
Are you a backend developer that’s being pushed into front-end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools for frontend development and frameworks too!
Streamed live at 8pm MST on Oct 25, 2017! https://virtualjug.com/vjug24/
This document summarizes a presentation about the SharePoint Framework, React, and mindfulness. It introduces SharePoint Framework for building customizations like web parts and extensions. It discusses using React components in SharePoint Framework and demonstrates some examples. It also introduces mindfulness and how React components work declaratively using JSX and props/state. Finally, it recommends some ready-made Office UI Fabric and PnP controls that can be used to build user interfaces.
Building a developer friendly plugin - WordCamp Chicago 2017Mike Hale
The document discusses 10 ways to build a developer-friendly WordPress plugin, including using GitHub/GitLab for issue tracking and pull requests, adding hooks for actions and filters, following coding standards, using object-oriented programming principles, enabling translations, unit testing, providing get_by methods, deprecating old methods, and following semantic versioning. The overall goal is to contribute high quality, well-supported plugins to the WordPress ecosystem.
Intro deck on React, presented at the Ottawa JS Sept. 2015 meetup.
Github repo for the Poop Monitor app: https://github.com/blefebvre/react-poop-monitor
Deck was built with Spectacle: https://github.com/FormidableLabs/spectacle
Source: https://github.com/blefebvre/react-ottawajs-spectacle-deck
Front Ends for Back End Developers - Spring I/O 2017Matt Raible
YouTube: https://www.youtube.com/watch?v=HnX09pdxEQI
Are you a backend developer that’s being pushed into front end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools of the trade for fronted development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. We’ll dive into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, we’ll show how it can all be found and integrated through the fine and dandy JHipster project.
Similar to React HOCs, Context and Observables (20)
Making Machine Learning Easy with H2O and WebFluxTrayan Iliev
Machine learning is becoming a must for many business domains and applications. H2O is a best-of-breed, open source, distributed machine learning library written in Java. The presentation shows how to create and train machine learning models easily using H2O Flow web interface, including Deep Learning Neural Networks (DNNs). The session provides a tutorial how to develop and deploy fullstack-reactive face recognition demo using React + RxJS WebSocket front-end, OpenCV, Caffe CNN for image segmentation, OpenFace CNN for feature extraction, H20 Flow for face recognition interactive model training and export as POJO. The trained POJO model is incorporated in a real-time streaming web service implemented using Spring 5 Web Flux and Spring Boot. All demo is 100% Java!
Rapid Web API development with Kotlin and KtorTrayan Iliev
Introduction to Kotlin and Ktor with flow, async and channel examples. Ktor is an async web framework with minimal ceremony that leverages the advantages of Kotlin like coroutines and extensible functional DSLs..
Sensor data is streamed in realtime from Arduino + accelerometeres, gyroscopes & compass 3D, ultrasound distance sensor, etc. using UDP protocol. The data processing is done with reactive Java alterantive implementations: callbacks, CompletableFutures and using Spring 5 Reactor library. The web 3D visualization with Three.js is streamed using Server Sent Events (SSE).
A video for the IoT demo is available @YouTube: https://www.youtube.com/watch?v=AB3AWAfcy9U
All source code of the demo is freely available @GitHub: https://github.com/iproduct/reactive-demos-iot
There are more reactive Java demos in the same repository - callbacks, CompletableFuture, realtime event streaming. Soon I'll add a description how to build the device and upload Arduino sketch, as well as describe CompletableFuture and Reactor demos and 3D web visualization part with Three.js. Please stay tuned :)
Learning Programming Using Robots - Sofia University Conference 2018 Trayan Iliev
Learn information technologies by creating your own robots and IoT projects. Robotics and IoT offer rich opportunities for practical and active learning of core information technologies, programming languages and software architectures. Presentation includes examples of teaching practices and robotics projects, and offers suggestions why and how to use them to achieve better students' motivation, engagement, creativity, and connection between theory and practice.
Active Learning Using Connected Things - 2018 (in Bulgarian)Trayan Iliev
Learn about active learning methods and practices using Robotics, IoT, and "smart things" projects. Includes examples of teaching practices and robotics projects, and offers suggestions why and how to use them to achieve better students' motivation, engagement, creativity, and connection between theory and practice. Several blended learning models are compared - Flipped Classroom, Stations/Labs Rotation, Flex model. Project support for individual learning styles is discussed.
Spring 5 Webflux - Advances in Java 2018Trayan Iliev
The document discusses a presentation on functional reactive services with Spring 5 WebFlux. It introduces functional reactive programming (FRP), Project Reactor, building REST services with Spring 5 WebFlux including routers, handlers, filters, and reactive repositories. It also covers end-to-end non-blocking reactive service-oriented architecture with Netty, reactive WebClients, and real-time event streaming to JavaScript clients using server-sent events (SSE). The presentation code examples are available on GitHub.
Fog computing is a system-level architecture that distributes computing, storage, control and networking functions closer to users along the continuum between IoT devices and the cloud. It aims to address issues like high latency and network congestion that result from processing all IoT data in the cloud. Key characteristics of fog computing include its ability to support location awareness, mobility and real-time interactions through a geographically distributed deployment.
Microservices with Spring 5 Webflux - jProfessionalsTrayan Iliev
The document discusses reactive microservices using Spring 5 WebFlux. It introduces reactive programming concepts like Reactive Streams and Project Reactor. It explains how Spring 5 supports reactive programming with WebFlux, reactive repositories, and hot event streaming. Code examples for WebFlux routing, handlers, and reactive clients are available on GitHub.
Reactive Microservices with Spring 5: WebFlux Trayan Iliev
On November 27 Trayan Iliev from IPT presented “Reactive microservices with Spring 5: WebFlux” @Dev.bg in Betahaus Sofia. IPT – Intellectual Products & Technologies has been organizing Java & JavaScript trainings since 2003.
Spring 5 introduces a new model for end-to-end functional and reactive web service programming with Spring 5 WebFlow, Spring Data & Spring Boot. The main topics include:
– Introduction to reactive programming, Reactive Streams specification, and project Reactor (as WebFlux infrastructure)
– REST services with WebFlux – comparison between annotation-based and functional reactive programming approaches for building.
– Router, handler and filter functions
– Using reactive repositories and reactive database access with Spring Data. Building end-to-end non-blocking reactive web services using Netty-based web runtime
– Reactive WebClients and integration testing. Reactive WebSocket support
– Realtime event streaming to WebClients using JSON Streams, and to JS client using SSE.
Presentation from BGOUG conference Nov 17, 2017.
Since September 2017, Java 9 is generally available. It offers many enhancements:
• Modularity – provides clear separation between public and private APIs, stronger encapsulation & dependency management.
• JShell – using and customizing Java 9 interactive shell by example
• Process API updates – feature-rich, async OS process management and statistics
• Reactive Streams, CompletableFuture and Stream API updates
• Building asynchronous HTTP/2 and WebSocket pipelines using HTTP/2 Client and CompletableFuture composition
• Collection API updates
• Stack walking, and other language enhancements (Project Coin)
Discussed topics are accompanied by live demos available for further review @ github.com/iproduct.
The document discusses various topics related to reactive and functional programming including NGRX, RxJS, Redux, Reactive Streams specification, and computing derived data using Reselect. It provides code examples for setting up an NGRX application with state management, effects, selectors, and composing the root reducer. It also discusses hot and cold streams, converting cold streams to hot, and the anatomy of RxJS operators.
Stream Processing with CompletableFuture and Flow in Java 9Trayan Iliev
Stream based data / event / message processing becomes preferred way of achieving interoperability and real-time communication in distributed SOA / microservice / database architectures.
Beside lambdas, Java 8 introduced two new APIs explicitly dealing with stream data processing:
- Stream - which is PULL-based and easily parallelizable;
- CompletableFuture / CompletionStage - which allow composition of PUSH-based, non-blocking, asynchronous data processing pipelines.
Java 9 will provide further support for stream-based data-processing by extending the CompletableFuture with additional functionality – support for delays and timeouts, better support for subclassing, and new utility methods.
More, Java 9 provides new java.util.concurrent.Flow API implementing Reactive Streams specification that enables reactive programming and interoperability with libraries like Reactor, RxJava, RabbitMQ, Vert.x, Ratpack, and Akka.
The presentation will discuss the novelties in Java 8 and Java 9 supporting stream data processing, describing the APIs, models and practical details of asynchronous pipeline implementation, error handling, multithreaded execution, asyncronous REST service implementation, interoperability with existing libraries.
There are provided demo examples (code on GitHub) using Completable Future and Flow with:
- JAX-RS 2.1 AsyncResponse, and more importantly unit-testing the async REST service method implementations;
- CDI 2.0 asynchronous observers (fireAsync / @ObservesAsync);
Reactive Java Robotics & IoT with Spring ReactorTrayan Iliev
On April 4-th, 2017 in cosmos coworking camp – Sofia, Trayan Iliev will talk about “Reactive Java Robotics and IoT with Spring Reactor” (http://robolearn.org/reactive-java-robotics-iot-spring-reactor/).
The event is organized by DEV.BG and it is part from the user group Internet of Things.
Program:
1. Robotics, IoT & Complexity. Domain-Driven Design (DDD). Reactive programming. Reactive Streams (java.util.concurrent.Flow);
2. High performance non-blocking asynchronous programming on JVM using Reactor project (using Disruptor/RingBuffer);
3. Implementig reactive hot event streams processing with Reactor: Flux & Mono, Processors;
4. End-to-end reactive web applications and services: Reactor IO (REST, WebSocket) + RxJS + Angular 2;
5. IPTPI robot demo – reactive hot event streams processing on Raspberry Pi 2 + Arduino with embedded and mobile interfaces: http://robolearn.org/
For the lecturer: Trayan Iliev
– founder and manager of IPT – Intellectual Products & Technologies (http://iproduct.org/) – company for IT trainings and consultancy, specialized in Java, Fullstack JavaScipt, web and mobile technologies
– 15+ years training and consulting experience
– lecturer on the conferences, organized by BGJUG and BGOUG – 9 presentations
– organizer of hackathons on Java robotics & IoT in Sofia and Plovdiv
– presenter on international developer conferences: jPrime, jPofessionals, Voxxed Days
Hackathon: “IPTPI and LeJaRo Meet The Real World”Trayan Iliev
This document discusses a hackathon event called "RoboLearn Hackathon: IPTPI and LeJaRo meet the Real World" hosted in Sofia, Bulgaria on December 4, 2015. It introduces Trayan Iliev, the presenter, and his company IPT that specializes in Java training. The presentation covers how to build robots with Java platforms like Lego Mindstorms, Raspberry Pi, Arduino and others. Code examples are provided for controlling motors and sensors on Lego robots using the LeJOS Java library.
This document provides an overview and introduction to reactive robotics and the Internet of Things (IoT). It discusses several key concepts including reactive programming, functional reactive programming, and high-performance reactive Java. It also covers topics like concurrency, parallelism, queues, and the LMAX Disruptor design pattern. Code examples are provided to demonstrate reactive programming concepts using tools like RxJava. The document aims to explain reactive approaches that can help address complexity in robotics and IoT systems.
IPT presentation @ jProfessionals 2016 on Java and JavaScipt Reactive Robotics and IoT including: Domain Driven Design (DDD), high-performance reactive micro-services development using Spring Reactor, state-of-the-art component-based client side MVVM implementation with Angular 2, ngrx (Redux pattern), TypeScript and reactive WebSockets.
My jPrime 2016 presentation shows example of Domain-Driven Design (DDD), Event Sourcing (ES) and Functional Reactive Programming (FRP) using Reactor and Redux in a showcase of Java robotics - two small robots IPTPI (Raspberry Pi 2 + Ardiuno) and LeJaRo (LeJOS).
Presentation is highlighting novelties in SPA development with Angular 2 (+Ionic 2 demo) with real code examples.
We created together simple Ng2 application with Angular CLI.
All the code is available on GitHub (link to demos is at the end of presentation).
Prerequisites:
1. Install NodeJS. It is better to install version 6 or 4x. Read about NPM.
2. Install TypeScript + editor (Visual Studio Code or Sublime 3).
3. Install Angular 2 Command Line Interface (Angular CLI):
npm install -g angular-cli
An MVP (Minimum Viable Product) mobile application is a streamlined version of a mobile app that includes only the core features necessary to address the primary needs of its users. The purpose of an MVP is to validate the app concept with minimal resources, gather user feedback, and identify any areas for improvement before investing in a full-scale development. This approach allows businesses to quickly launch their app, test its market viability, and make data-driven decisions for future enhancements, ensuring a higher likelihood of success and user satisfaction.
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsEstuary Flow
Unlock the full potential of your data by effortlessly migrating from PostgreSQL to Snowflake, the leading cloud data warehouse. This comprehensive guide presents an easy-to-follow 8-step process using Estuary Flow, an open-source data operations platform designed to simplify data pipelines.
Discover how to seamlessly transfer your PostgreSQL data to Snowflake, leveraging Estuary Flow's intuitive interface and powerful real-time replication capabilities. Harness the power of both platforms to create a robust data ecosystem that drives business intelligence, analytics, and data-driven decision-making.
Key Takeaways:
1. Effortless Migration: Learn how to migrate your PostgreSQL data to Snowflake in 8 simple steps, even with limited technical expertise.
2. Real-Time Insights: Achieve near-instantaneous data syncing for up-to-the-minute analytics and reporting.
3. Cost-Effective Solution: Lower your total cost of ownership (TCO) with Estuary Flow's efficient and scalable architecture.
4. Seamless Integration: Combine the strengths of PostgreSQL's transactional power with Snowflake's cloud-native scalability and data warehousing features.
Don't miss out on this opportunity to unlock the full potential of your data. Read & Download this comprehensive guide now and embark on a seamless data journey from PostgreSQL to Snowflake with Estuary Flow!
Try it Free: https://dashboard.estuary.dev/register
Overview of ERP - Mechlin Technologies.pptxMitchell Marsh
This PowerPoint presentation provides a comprehensive overview of Enterprise Resource Planning (ERP) systems. It covers the fundamental concepts, benefits, and key functionalities of ERP software, illustrating how it integrates various business processes into a unified system. From finance and HR to supply chain and customer relationship management, ERP facilitates efficient data management and decision-making across organizations. Whether you're new to ERP or looking to deepen your understanding, this presentation offers valuable insights into leveraging ERP for business success.
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...Hironori Washizaki
Hironori Washizaki, "Charting a Course for Equity: Strategies for Overcoming Challenges and Promoting Inclusion in the Metaverse", IEEE COMPSAC 2024 D&I Panel, 2024.
Ansys Mechanical enables you to solve complex structural engineering problems and make better, faster design decisions. With the finite element analysis (FEA) solvers available in the suite, you can customize and automate solutions for your structural mechanics problems and parameterize them to analyze multiple design scenarios. Ansys Mechanical is a dynamic tool that has a complete range of analysis tools.
A Comparative Analysis of Functional and Non-Functional Testing.pdfkalichargn70th171
A robust software testing strategy encompassing functional and non-functional testing is fundamental for development teams. These twin pillars are essential for ensuring the success of your applications. But why are they so critical?
Functional testing rigorously examines the application's processes against predefined requirements, ensuring they align seamlessly. Conversely, non-functional testing evaluates performance and reliability under load, enhancing the end-user experience.
IN Dubai [WHATSAPP:Only (+971588192166**)] Abortion Pills For Sale In Dubai** UAE** Mifepristone and Misoprostol Tablets Available In Dubai** UAE
CONTACT DR. SINDY Whatsapp +971588192166* We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai** Sharjah** Abudhabi** Ajman** Alain** Fujairah** Ras Al Khaimah** Umm Al Quwain** UAE** Buy cytotec in Dubai +971588192166* '''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol** Cytotec” +971588192166* ' Dr.SINDY ''BUY ABORTION PILLS MIFEGEST KIT** MISOPROSTOL** CYTOTEC PILLS IN DUBAI** ABU DHABI**UAE'' Contact me now via What's App… abortion pills in dubai Mtp-Kit Prices
abortion pills available in dubai/abortion pills for sale in dubai/abortion pills in uae/cytotec dubai/abortion pills in abu dhabi/abortion pills available in abu dhabi/abortion tablets in uae
… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all** Cytotec Abortion Pills are Available In Dubai / UAE** you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pills in Dubai** UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if it's beyond 6 months. Our Abu Dhabi** Ajman** Al Ain** Dubai** Fujairah** Ras Al Khaimah (RAK)** Sharjah** Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical** medical and surgical abortion methods for early through late second trimester** including the Abortion By Pill Procedure (RU 486** Mifeprex** Mifepristone** early options French Abortion Pill)** Tamoxifen** Methotrexate and Cytotec (Misoprostol). The Abu Dhabi** United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used** 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need for surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi** United Arab Emirates** uses the latest medications for medical abortions (RU-486** Mifeprex** Mifegyne** Mifepristone** early options French abortion pill)** Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi** United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our
Explore the rapid development journey of TryBoxLang, completed in just 48 hours. This session delves into the innovative process behind creating TryBoxLang, a platform designed to showcase the capabilities of BoxLang by Ortus Solutions. Discover the challenges, strategies, and outcomes of this accelerated development effort, highlighting how TryBoxLang provides a practical introduction to BoxLang's features and benefits.
Break data silos with real-time connectivity using Confluent Cloud Connectorsconfluent
Connectors integrate Apache Kafka® with external data systems, enabling you to move away from a brittle spaghetti architecture to one that is more streamlined, secure, and future-proof. However, if your team still spends multiple dev cycles building and managing connectors using just open source Kafka Connect, it’s time to consider a faster and cost-effective alternative.
A captivating AI chatbot PowerPoint presentation is made with a striking backdrop in order to attract a wider audience. Select this template featuring several AI chatbot visuals to boost audience engagement and spontaneity. With the aid of this multi-colored template, you may make a compelling presentation and get extra bonuses. To easily elucidate your ideas, choose a typeface with vibrant colors. You can include your data regarding utilizing the chatbot methodology to the remaining half of the template.
1. Using Context, Higher-Order Components
and Observables with React
Slide 1Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Sofia
May 15, 2017
Context, HOCs & Observables with React
Trayan Iliev
IPT – Intellectual Products & Technologies
e-mail: tiliev@iproduct.org
web: http://www.iproduct.org
2. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 2Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
About Us: IPT - Intellectual Products & Technologies
Since 2003 we provide trainings and share knowledge
in JS/ TypeScript/ Node/ Express/ Socket.IO/ NoSQL/
Angular/ React / Java SE/ EE/ Web/ REST SOA:
Node.js + Express/ hapi + React.js + Redux + GraphQL
Angular + TypeScript + Redux (ngrx)
Java EE6/7, Spring, JSF, Portals/Portlets: Liferay, GateIn
Reactive IoT with Reactor / RxJava / RxJS
SOA & Distributed Hypermedia APIs (REST)
Domain Driven Design & Reactive Microservices
3. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 3Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Where is The Code?
React.js demo code is available @GitHub:
https://github.com/iproduct/demos-and-presentations
Demos:
react-router-redux-demo – React + Redux + Router +
Thunk (async actions) integration
react-hocs-observables – React + Redux + Router + RxJS
Observables (async action stream transforms) + Reselect +
Recompose + Material-UI
4. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 4Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Contemporary Web Applications
Provide better User Experience (UX) by:
more interactive
loading and reacting faster in response (or even
anticipation) of user's moves
able to work offline
supporting multiple devices and screen resolutions
(responsive design)
are following design metaphors consistently (e.g. Google
Material Design - MD)
looking more like desktop application than static web page
5. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 5Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
MVC Comes in Different Flavors
MVC
MVVM
MVP
Sources:https://en.wikipedia.org/wiki/Model_View_ViewModel#/media/File:MVVMPattern.png, https://en.wikipedia.org/wiki/Model
%E2%80%93view%E2%80%93presenter#/media/File:Model_View_Presenter_GUI_Design_Pattern.png
License: CC BY-SA 3.0, Authors:Ugaya40, Daniel.Cardenas
6. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 6Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Single Page Applications (SPA)
Source: http://stackoverflow.com/questions/12863663/complex-nesting-of-partials-and-templates
Author: PhillipKregg
7. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 7Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
SPA with Multiple Router Outlets
8. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 8Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Why SPA?
Page does not flicker – seamless (or even animated)
transitions
Less data transferred – responses are cached
Only raw data, not markup
Features can be loaded on demand (lazy) or in background
Most page processing happens on the client offloading the
server: REST data services + snapshops for crawlers (SEO)
Code reuse – REST endopints are general purpose
Supporting multiple platforms (Web, iOS, Android) →
React Native
9. Using Context, Higher-Order Components
and Observables with React
Slide 9Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Sofia
May 15, 2017
Developing Sinagle Page Apps (SPA) in 3 steps
1) Setting up a build system – npm, webpack, gulp are common
choices, babel, typescript, JSX, CSS preprocessors (SASS,
SCSS, LESS, PostCSS), servers ...
2) Designing front-end architecture components – views & layouts
+ view models (presentation data models) + presentation logic
(event handling, messaging) + routing paths (essential for SPA)
Better to use component model to boost productivity and
maintainability.
3) End-to-end application design – front-end: wireframes → views,
data entities & data streams → service API and models design,
sitemap → router config
10. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 10Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Components Resuability - Two Approaches
Inheritance - we create new component Types (or Classes)
by extending exiting ones – Class Hierachy:
Composition:
Object composition
Functional composition
11. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 11Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Object Composition Hierachy
12. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 12Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Functional Composition
Functional programming (FP) - the mathematical notion of
function composition
Composing functions f and g, g(f(x)) means f’s out → g’s input
In FP, the inputs and outputs are values without life cycles
Simpler to understand compared to object compositions
If input-output types match, functions can always compose!
More sophisticated forms of composition can be implemented
using higher-order functions: functions can be passed as
inputs and received as outputs to/from other functions
Functions are just immutable values – no special treatment!
13. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 13Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Higher-Order Components
Higher-order component (HOC) is a function that takes a
component and returns a new component:
const EnhancedComponent =
higherOrderComponent( WrappedComponent );
Example:
const VisibleTodoList =
connect(mapStateToProps, mapDispatchToProps) (TodoList);
14. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 14Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Use HOCs For Cross-Cutting Concerns
class BlogPost extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
blogPost: DataSource.getBlogPost(props.id)
};
}
componentDidMount(){DataSource.addChangeListener(this.handleChange);}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);}
handleChange() {
this.setState({blogPost: DataSource.getBlogPost(this.props.id)}); }
render() {
return <TextBlock text={this.state.blogPost} />; }
}
15. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 15Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Use HOCs For Cross-Cutting Concerns (2)
function withSubscription(WrappedComponent, selectData) {
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {data: selectData(DataSource, props) }; }
componentDidMount() {
DataSource.addChangeListener(this.handleChange); }
componentWillUnmount({
DataSource.removeChangeListener(this.handleChange);}
handleChange() {
this.setState({data: selectData(DataSource, this.props)});}
render() {
return <WrappedComponent data={this.state.data} {...this.props}/>;}
};
}
Anonimous class.
Name should be added using
dispalyName static property
16. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 16Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Usage:
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
});
17. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 17Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using HOCs – Things To Remember:
Don't Mutate the Original Component. Use Composition.
Convention: Pass Unrelated Props Through to the
Wrapped Component
Convention: Maximizing Composability
const ConnectedComment =
connect(commentSelector, commentActions)(Comment);
// compose(f, g, h) is the same as (...args) => f(g(h(...args)))
const enhance = compose(withRouter,
connect(commentSelector, commentActions) );
enhance(Comment);
Convention: Wrap the Display Name for Easy Debugging
The order matters!
18. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 18Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
How to Boost Performance with React
Use the production build
Avoiding reconciling the DOM – React provides a component
lifecycle function, shouldComponentUpdate, which is
triggered before the re-rendering process starts (virtual DOM
comparison and possible eventual DOM reconciliation), giving
the developer the ability to short circuit this process. Default:
shouldComponentUpdate: function(nextProps, nextState) {
return true;
}
React invokes shouldComponentUpdate often -should be fast
Use immutability for comparisons to be efficient
19. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 19Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Performance with shouldComponentUpdate
class MyStatelessComp extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired
};
shouldComponentUpdate: function(nextProps, nextState) {
return this.props.value !== nextProps.value;
},
render: function() {
return <div>{this.props.value}</div>;
}
});
20. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 20Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Boosting Performance: PureRenderMixin
Before – using mixins(Mixins Considered Harmful by Dan Abramov):
var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
mixins: [PureRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
Now you should prefer:
class MyComponent extends React.PureComponent { … }
21. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 21Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using HOCs – Caveats:
Don't Use HOCs Inside the render Method:
render() {
const EnhancedComponent = enhance(MyComponent);
return <EnhancedComponent />;
}
Static Methods Must Be Copied Over
Maximizing Composability
Refs Aren't Passed Through
Don't
22. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 22Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Refs to Components
Refs (references) – allow to find the DOM markup rendered
by a component, and invoke methods on component
instances returned from render()
Example uses: absolute positioning, using React components in
larger non-React applications, transition existing code to React.
var myComponentInstanceRef =
ReactDOM.render(<MyComp />, myContainer);
myComponentInstanceRef.doSomething();
ReactDOM.findDOMNode(componentInstance) – this
function will return the DOM node belonging to the outermost
HTML element returned by render.
23. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 23Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
The ref Callback Attribute
render: function() {
return (
<TextInput ref={ function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
OR better using ES6 => :
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
Will be called twice – on mount with ref,
and on unmount with null. That is why
we check if ref not null.
24. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 24Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using React Component Context
React props allow to track data-flow easy between componets
React Context is alternative if you want to pass data through
the component tree without having to pass the props down
manually at every level.
Inversion of Control (IoC) principle and Dependency Injection
(DI) pattern
React's "context" feature lets you do this – Example how to
inject testService and router in TestsList component:
TestsList.contextTypes = {
testService: React.PropTypes.object,
router: React.PropTypes.object
};
25. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 25Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Passing Refs from Wrapped Comp to HOC
function Field({ inputRef, ...rest }) {
return <input ref={inputRef} {...rest} />;
}
// Wrap Field in a higher-order component
const EnhancedField = enhance(Field);
// Inside a class component's render method...
<EnhancedField
inputRef={(inputEl) => {
// This callback gets passed through as a regular prop
this.inputEl = inputEl
}}
/>
// Now you can call imperative methods
this.inputEl.focus();
26. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 26Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Providing Services with React Context
class IPTKnowledgeTester extends React.Component {
constructor(props) { super(props);
this.testServiceSingleton = new TestService(TEST_SERVICE_URL);
this.localeServiceSingleton = new LocaleService(DEFAULT_LOCALE,
this.onLocaleChange);
}
getChildContext() {
return {
testService: this.testServiceSingleton,
localeService: this.localeServiceSingleton
}; } …
}
IPTKnowledgeTester.childContextTypes = {
testService: React.PropTypes.object,
localeService: React.PropTypes.object
};
27. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 27Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
React Context Usage Example
handleAddTest() {
const path = { pathname: '/test',
query: { controls: true, edit: true } };
this.context.router.push(path);
}
componentDidMount() {
this.context.testService.getTests().then((tests) => {
this.setState({ tests: tests });
});
}
28. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 28Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Referencing Context in Lifecycle Methods
void componentWillReceiveProps(
object nextProps, object nextContext
)
boolean shouldComponentUpdate(
object nextProps, object nextState, object nextContext
)
void componentWillUpdate(
object nextProps, object nextState, object nextContext
)
void componentDidUpdate(
object prevProps, object prevState, object prevContext
)
29. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 29Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using Context with Functional Components
const Button = ({children}, context) =>
<button style={{background: context.color}}>
{children}
</button>;
Button.contextTypes = {color: React.PropTypes.string};
30. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 30Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
React Router v4 Configuration
<Route path="/" component={Base} />
<Route path="/home" component={Home} />
<Route path="/intro"
render={() => <div>How to start using this app</div>} />
<Route path="/repos" component={Repos} />
<Route path="/topics" component={Topics} />
<Route path="/about" component={About} />
<Route path="/show-location" component={ShowTheLocation} />
const Repos = (props) => {
return (
<div>
<h2>Repos</h2>
<Route path="/repos/:userName/:repoName" component={Repo} />
</div>
);
};
Hierarchical navigation,
no need to use props.children
31. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 31Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Site Navigation using Router v4
<ul className="main-menu">
<li><Link to="/home">Home</Link></li>
<li><Link to="/intro">Intro</Link></li>
<li><Link to="/repos">Repos</Link></li>
<li><Link to="/topics">Topics</Link></li>
<li><Link to="/show-location">Show the Location</Link></li>
<li><Link to="/about">About</Link></li>
<form className="navbar-form navbar-right" role="search"
onSubmit={this.handleSerch}>
<input type="text" placeholder="userName" /> / {' '}
<input type="text" placeholder="repo" /> {' '}
<button type="submit" className="btn btn-default">Go</button>
</form>
</ul>
32. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 32Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Programmatic Navigation using Router v4
ReactDOM.render(
<Router >
<App />
</Router>,
document.getElementById('root')
);
handleSerch = (event) => {
event.preventDefault();
const userName = event.target.elements[0].value;
const repo = event.target.elements[1].value;
const path = `/repos/${userName}/${repo}`;
console.log(path);
console.log(this.context);
// this.context.router.history.push(path);
this.props.history.push(path);
}
33. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 33Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using @withRouter Decorator (HOC) - Router v4
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
@withRouter
export default class ShowTheLocation extends React.Component {
render() {
const { match, location, history } = this.props;
return (
<div>
<div>You are now at {location.pathname}</div>
<div>The match is: {JSON.stringify(match)}</div>
<div>The history contains: {JSON.stringify(history)}</div>
</div>
)
}
}
34. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 34Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Flux Design Pattern
Source: Flux in GitHub, https://github.com/facebook/flux, License: BSD 3-clause "New" License
35. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 35Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Design Pattern
Source: @ngrx/store in GitHub, https://gist.github.com/btroncone/a6e4347326749f938510
Linear flow:
36. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 36Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux
Streamlined state management for React.js applications,
inspired by Redux
State is a single immutable data structure
Actions describe state changes
Pure functions called reducers take the previous state and the
next action to compute the new state
State is kept within single Store, and accessed through sub-
state selectors, or as Observable of state changes
Components are by default perfomance optimized using the
shouldComponentUpdate() → performant change detection
37. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 37Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Recommended (Basic) Project Structure
actions – action creator factory functions (design pattern
Command)
assets – static assets (css images, fonts, etc.) folder
components – simple (dumb) react components – pure render
container – Redux Store aware (smart) component wrappers
reducers – the only way to advance state:
function(OldStoreState, Action) => NewStoreState // = Rx scan()
index.js – bootstraps app providing access to Store for all
containers (smart components) using React context
38. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 38Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Bootstrapping Redux App – index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import { FilteredTodoApp } from './containers/filtered-todo-app';
const store = createStore(
rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__() );
const render = (Component) => {
ReactDOM.render(
<Provider store={store}>
<FilteredTodoApp />
</Provider>,
document.getElementById('root')
);
};
Top level container component
Redux store provider
39. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 39Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Action Creators – /actions/index.js
let nextTodoId = 0;
export const addTodo = (text) => ({
type: 'ADD_TODO',
id: nextTodoId++,
text
});
export const setVisibilityFilter = (filter) => ({
type: 'SET_VISIBILITY_FILTER',
filter
});
export const changeStatus = (id, status) => ({
type: 'CHANGE_STATUS',
id,
status
});
...
Action Payload
Action Type
40. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 40Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Reducers – /reducers/todo.js
const todoReducer = (state = {}, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
status: 'active'
};
case 'CHANGE_STATUS':
if (state.id !== action.id) {
return state;
}
return Object.assign({}, state, { status: action.status });
default:
return state;
}
};
41. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 41Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Reducers – /reducers/todos.js
const todosReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todoReducer(undefined, action)
];
case 'CHANGE_STATUS':
return state.map(todo =>
todoReducer(todo, action)
);
case 'DELETE_TODOS':
return state.filter(todo =>
todo.status !== action.status
);
default:
return state;
}
};
42. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 42Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Root Reducer – /reducers/index.js
import { combineReducers } from 'redux';
import todos from './todos';
import visibilityFilter from './visibilityFilter';
const rootReducer = combineReducers({
todos,
visibilityFilter
});
export default rootReducer;
43. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 43Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Containers – /conatiners/visible-todo-list.js
const getVisibleTodos = (todos, filter) => todos.filter(
todo => filter === 'all' ? true: todo.status === filter);
const mapStateToProps = (state) => ({
todos: getVisibleTodos(state.todos, state.visibilityFilter)
});
const mapDispatchToProps = (dispatch) => ({
onCompleted: (id) => {
dispatch(changeStatus(id, 'completed'));
},
onCanceled: (id) => {
dispatch(changeStatus(id, 'canceled'));
}
});
const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps
) (TodoList);
export default VisibleTodoList;
44. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 44Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux App using ES7 @connect Decorator
const getVisibleTodos = (todos, filter) => todos.filter(
todo => filter === 'all' ? true: todo.status === filter);
const mapStateToProps = (state) => ({
todos: getVisibleTodos(state.todos, state.visibilityFilter)
});
const mapDispatchToProps = (dispatch) => ({
onCompleted: (id) => {
dispatch(changeStatus(id, 'completed'));
},
onCanceled: (id) => {
dispatch(changeStatus(id, 'canceled'));
}
});
@connect(mapStateToProps, mapDispatchToProps)
export default class TodoList extends React.Component {
constructor(props) { ...
45. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 45Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using Redux Router Redux and Redux Thunk (1)
Idea: history + store (redux) → react-router-redux → enhanced history → react-
router
import { compose, createStore, combineReducers, applyMiddleware } from
'redux';
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from
'react-router-redux'; // React Router to Redux integration
import thunk from 'redux-thunk'; // Allows using thunks = async actions
import reducers from './reducers'; // your reducers here
const history = createHistory(); // use browser History API
// middleware for intercepting & dispatching navigation & async actions
const middleware = [routerMiddleware(history), thunk];
// Enable Redux Devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||
compose;
46. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 46Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Using Redux Router Redux and Redux Thunk (2)
const store = createStore(
CombineReducers({ ...reducers,
router: routerReducer // Add the reducer to store on `router` key
}),
/* preloadedState, */
ComposeEnhancers( applyMiddleware(...middleware) ));
store.dispatch(push('/repos/react/redux'));//dispatch navigation action
ReactDOM.render(
<Provider store={store}>//ConnectedRouter use store from the Provider
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
)
47. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 47Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Redux Thunk Async Actions - /actions/counter.js
export function increment(x) {
return { type: INCREMENT, amount: x }
}
export function incrementAsync(x) {
return dispatch => //Can invoke sync or async actions with `dispatch`
setTimeout(() => { dispatch(increment(x)); }, 2000);
}
export function incrementIfOdd(x) {
return (dispatch, getState) => {
const { counter } = getState();
if (counter.number % 2 === 0) return;
dispatch(increment(x)); //Can invoke actions conditionally
};
}
48. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 48Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Advanced Redux using Middleware Libraries
Normalizr – normalizing and denormalizing data in state, helps
to transform nested JSON response structures into a relational
DB-like plain entities, referenced by Id in the Redux store.
redux-thunk – in addition to plain actions, Action Creators can
now return Thunks – callback functions of dispatch and
getState arguments, allowing to handle async operations like
data fetch from REST endpoint and Promise-like composition.
redux-promise/ redux-promise-middleware – thunk alternatives
redux-observable – really powerfull reactive transforms of
async action events as RxJS Observables, called Epics:
(action$:Observable<Action>, store:Store) => Observable<Action>
49. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 49Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Functional Reactive Programming
Functional Reactive Programming (FRP) [Wikipedia]: a
programming paradigm for reactive programming
(asynchronous dataflow programming) using the building
blocks of functional programming (e.g. map, reduce, filter).
FRP has been used for programming graphical user
interfaces (GUIs), robotics, and music, aiming to simplify
these problems by explicitly modeling time. Ex. (RxJS):
const Observable = require('rxjs').Observable;
Observable.from(['Reactive', 'Extensions', 'JavaScript'])
.take(2).map(s => `${s}: on ${new Date()}`)
.subscribe(s => console.log(s));
Result: Reactive: on Sat Apr 29 2017 20:00:39 GMT+0300
Extensions: on Sat Apr 29 2017 20:00:39 GMT+0300
Good intro tutorial in RP using RxJS by Andre Staltz see: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
JS Fiddle of the demo: http://jsfiddle.net/staltz/8jFJH/48/
50. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 50Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Definitions of Reactive Programming
Microsoft®
opens source polyglot project ReactiveX
(Reactive Extensions) [http://reactivex.io]:
Rx = Observables + LINQ + Schedulers :)
Supported Languages – Java: RxJava, JavaScript: RxJS, C#: Rx.NET,
C#(Unity): UniRx, Scala: RxScala, Clojure: RxClojure, C++: RxCpp,
Ruby: Rx.rb, Python: RxPY, Groovy: RxGroovy, JRuby: RxJRuby,
Kotlin: RxKotlin, Swift: RxSwift
ReactiveX for platforms and frameworks: RxNetty, RxAndroid, RxCocoa
Reactive Streams Specification
[http://www.reactive-streams.org/]
51. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 51Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
RxJS – JS ReactiveX (Reactive Extensions)
[http://reactivex.io, https://github.com/ReactiveX]
ReactiveX is a polyglot library for composing asynchronous
event streams (observable sequences).
It extends the observer pattern by declarative composition of
functional transformations on events streams (e.g. map-filter-
reduce, etc.)
Abstracs away low-level concerns like concurrency,
synchronization, and non-blocking I/O.
Follows the next - error - completed event flow
Allows natural implementation of Redux design pattern
Alternative (together with promises) for solving “callback hell”
problem
52. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 52Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Resources: RxMarbles and RxJS Coans
RxMarbles:
http://rxmarbles.com/
RxJS Coans:
https://github.com/Reactive-Extensions/RxJSKoans
53. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 53Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Demo Time :)
React.js demo code is available @GitHub:
https://github.com/iproduct/demos-and-presentations
Demos:
react-router-redux-demo – React + Redux + Router +
Thunk (async actions) integration
react-hocs-observables – React + Redux + Router + RxJS
Observables (async action stream transforms) + Reselect +
Recompose + Material-UI
54. Using Context, Higher-Order Components
and Observables with React
Sofia
May 15, 2017
Slide 54Sources:ReactJS [https://github.com/facebook/react/ ]
Licensed under the Creative Commons Attribution 4.0 International Public License
Thank’s for Your Attention!
Trayan Iliev
CEO of IPT – Intellectual Products
& Technologies
http://iproduct.org/
http://robolearn.org/
https://github.com/iproduct
https://twitter.com/trayaniliev
https://www.facebook.com/IPT.EACAD
https://plus.google.com/+IproductOrg