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

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

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. Please type your questions into the chat box.

17. 4100 Spring Valley Road Suite 308 Dallas, TX 75244
Texas
4100 Spring Valley Road Suite 308 Dallas, TX 75244
Tel: | Fax:
Silicon Valley
1750 Meridian Avenue Suite 4105 San Jose, CA 95150
Tel: | Fax:
India
3rd Floor, Revolution Mall, Above Big Bazaar, Kothrud, Pune, India
Tel: | Fax:

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

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

21. Proud moment…
…100 more

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