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

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

React - Performance Virtual DOM Avoid accessing DOM directly 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)

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

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

React Paradigm

React Paradigm

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

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)

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

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

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

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

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

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

Please type your questions into the chat box.

4100 Spring Valley Road Suite 308 Dallas, TX 75244 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 sales@synerzip.com

500+ Dual-Shore 110+ Inc. 5000 10+ 50% DNA 2X 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

QA Testing / Automation 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

Leveraging Dual Shore Operations Operating As One Extended Team 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) Why Dual Shore? Scalability: Efficiently scale when your business needs Resource: No shortage of skilled and ready resource Cost: More economic to build the product offshore

Proud moment… …100 more

Building Great UX with a Remote Team 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.