Is React The Best Thing Since Sliced Bread?
Download as PPTX, PDF•0 likes•74 views
The document is a webinar presentation by Synerzip discussing React, its philosophy, development practices, and performance advantages, particularly comparing it to Angular and Vue frameworks. Key points include React's component-based architecture, one-way data flow, and its suitability for creating responsive web and mobile applications using React Native. The presentation also addresses the pros and cons of React and highlights its best use cases and community support.
Is React The Best Thing Since Sliced Bread?
- 1. © Synerzip2018 Synerzip Webinar Series 2018 Is React The Best Thing Since Sliced Bread? Presented by Yogesh Patel, Director of Engineering, Synerzip
- 2. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Philosophy ● Learn once; apply anywhere ● Thinking in React: UI is application state representation ● Component-based UI ● Component ○ Manage its own state ○ Composable to make complex component ● React UI is a components hierarchy ● One way data flow ● Declarative UI development - JSX 2
- 3. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Performance ● Virtual DOM ○ Reconciliation algorithm ○ Avoid unnecessary changes to DOM ○ Collect several changes and apply to actual DOM ● Avoid accessing DOM directly ● State rendering engine to re-render UI on state change ● Treats UI as Component hierarchy ○ Re-render on state change ○ Collect changes and apply efficiently ● HTML hierarchy for browser and widget hierarchy for mobile (iOS/Android) 3
- 4. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Development ● Programming language: JavaScript ● React is View ○ Much less learning curve ○ Freedom to leverage the cool things - for example: ■ Typescript, ES6, ES5 ■ Any libraries for routing, utilities, API communication, async operations ■ Data (state) management libraries: redux, mobx ● React development ○ Building component by composable components ○ Managing data (state) for component 4
- 5. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React Paradigm ● UI is component hierarchy - Composition of Components ● Component - state, state mutation logic, UI (HTML/mobile widgets) ● Component maintains its own state (data) ● Parent Component passes its state as props (immutable) to its children ● Data flows in one direction from Parent to Children ● Event flows in one direction from Child to Parent 5
- 6. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React Paradigm 6
- 7. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React Paradigm 7
- 8. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React Community Support Web Common Mobile (iOS/Android) ReactJS - Core Library Container-Component Design ReactNative - Core Library Redux- State Management React-router: Routing Utilities - lodash, ramda, saga React-navigation, react-router- flux React-bootstrap, material-ui NativeBase, React-native material kit React-native-fetch-blob, react- native-push-notification Jest, Enzyme - Unit and Integration Testing 8
- 9. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React vs. AngularJS 1.x ● Angular is complete ecosystem to build UI for browser; React is View for state rendering ● Angular has multi-way data flow, very easy to introduce complex coding pattern; React follows One Way Data Flow ● Separation of concerns (Model, View and Controller) is philosophy of AngularJS; React is based on composable component ● Dirty checking has poor performance for complex UI as compare to React’s Virtual DOM rendering ● No Server side rendering support in AngularJS (for SEO) 9
- 10. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React vs. Angular (5 and +) ● Both are based on Component and one way data flow ● Angular is a framework, React is just View ● Mobile support: ○ Angular (Ionic)- Cross Browser Mobile Application ○ React - React-Native based mobile application; native widget without compromising on quality ● Learning curve is much longer in Angular - Typescript, templates, filters, directives, DI, modules, services etc.; React is simple to learn ● React: Virtual DOM and Angular: service worker thread, both have comparable performance on browser 10
- 11. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React vs. Vue ● Both have Components, one way data flow ● Vue supports JSX and templates (pure HTML) ● Vue supports directives and DI as Angular ● Vue is a framework; close to Angular concepts but support of React features on View ● For mobile, Vue supports framework7 for mobile webview; React supports react-native; Framework7 can be compared with bootstrap responsive webapp 11
- 12. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React vs. Backbone ● Backbone: Separation for Model and View, Data binding, custom events and collections; React is View, embedded model (state) and state mutation logic ● Multi way data flow is common in backbone, React has strict one way data flow ● React (View) + Backbone (Model, Binding) is perfect for backbone driven web application 12
- 13. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Cons ● It's not framework ● React projects are each different in terms of architecture decisions ● You deal with low level Javascript without framework level design principles ● HTML template is easy for designers vs JSX ● Need to take care about fast-moving supporting libraries ○ Update and migration with newer version 13
- 14. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Best Fit Use Case ● Building iOS/Android app and plan to build web application in future and vise-versa ○ Responsive web app - accessible from mobile browser ○ Non UI code will be shared across mobile and web ○ Common unit testing and integration testing ● Facing performance issue with existing UI framework: React as View ● Cost effective approach to target popular platform without compromising the performance and quality 14
- 15. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 React - Mobile Application ● React Native: Consistent developer experience (JS and React) ○ Learn once apply anywhere ○ Native widgets (Android/iOS) ● Ionic: Mobile optimized HTML, CSS and JS components, optimize for Angular ○ Webview based rendering ● Xamarin: Enable .NET developer to use existing code, libraries and tools ○ Compiler to build Android, iOS and Window 15
- 16. © Synerzip2018 Synerzip Webinar Series 2018© Synerzip2018 Synerzip Webinar Series 2018 Questions? 16 Please type your questions into the chat box.
- 17. © Synerzip2018© Synerzip2018 Texas 4100 Spring Valley Road Suite 308 Dallas, TX 75244 Tel: +1.469.374.0500 | Fax: +1.469.322.0490 Silicon Valley 1750 Meridian Avenue Suite 4105 San Jose, CA 95150 Tel: +1.510.519.9673 | Fax: +1.510.519.9673 India 3rd Floor, Revolution Mall, Above Big Bazaar, Kothrud, Pune, India 411 038 Tel: +91.20.67283222 | Fax: +91.20.67283222 [email protected]
- 18. © Synerzip201818 Who is Synerzip Synerzip is your Agile software product development partner 500+ strong team Dual-Shore matured delivery model 110+ product success stories Inc. 5000 awarded Inc 5000 6 years in a row 10+ years in business 50% savings from optimized delivery DNA a truly agile product development partner 2X accelerate product roadmap
- 19. © Synerzip201819 Partner in your growth QA Testing / Automation DevOps Proof of Concept In a few short weeks, we'll deliver a defined scope of work while you experience what it's like working with Lean / Startup MVP We bridge the gap from idea to MVP using our lean approach to agile product development Offshore-Outsource Hybrid Architects and product managers work with you on-site and fully manage the development effort Accelerate Product Roadmap Quickly scale your engineering capacity for ongoing software product development Migration / Upgrade Use Synerzip's skilled technologists to decrease the effort and risk of transitioning to a new technology or platform.
- 20. © Synerzip201820 Leveraging Dual Shore Operations US Team: Customer + Architects • Local team of architects and business analysts coordinate with you to understand product requirements • Design a workable model for your requirement after consulting with the India team • Enable a handshake between Program Manager (client side) and Product Owner (India team) India Team: Product Owner + Dev & QA • Identify optimal setting for the project and set up a team / hire • Understand the product, market, users, requirements, etc. and train developers • Use best practices for developing the product in a dual-shore mode while adopting existing processes (client side) Operating As One Extended Team
- 21. © Synerzip201821 Proud moment… …100 more
- 22. © Synerzip201822 Next Webinar Building Great UX with a Remote Team Wednesday, June 20, 2018 at 10am CT presenter: Amit Bakore Director of Product Management & UX Synerzip Will lead a panel discussion with several companies that have successfully built great UX with a remote team.