1 / 22

Is React The Best Thing Since Sliced Bread?

Presented by Yogesh Patel, Director of Engineering at Synerzip, this presentation explores the philosophy and benefits of React as a UI development framework. Learn about the component-based UI, one-way data flow, declarative UI development, and the performance advantages of React's Virtual DOM. Discover how React compares to other frameworks like Angular and Vue, and find out if React is the best fit for your development needs.

roesch
Download Presentation

Is React The Best Thing Since Sliced Bread?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Is React The Best Thing Since Sliced Bread? Presented by Yogesh Patel, Director of Engineering, Synerzip

  2. 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

  3. 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)

  4. 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

  5. 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

  6. React Paradigm

  7. React Paradigm

  8. React Community Support

  9. 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)

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. Questions? Please type your questions into the chat box.

  17. sales@synerzip.com

  18. Who is Synerzip Synerzip is your Agile software product development partner 2X accelerate product roadmap 110+ product success stories Inc. 5000 awarded Inc 5000 6 years in a row 500+ strong team DNA a truly agile product development partner 10+ years in business 50% savings from optimized delivery Dual-Shore matured delivery model

  19. Partner in your growth 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. QA Testing / Automation

  20. Leveraging Dual Shore Operations US Team: Customer + Architects India Team: Product Owner + Dev & QA • 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) • 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. Proud moment… …100 more

  22. 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.

More Related