Embed Size (px)
Citation preview
© 2018 Synerzip, LLC. | Confidential
WebinarAngular vs. React
Don’t roll the dice
Presented by…Yogesh Patel, Director of Engineering
Pankaj Parkar, Technical Architect and Mike Watson, VP of Engineering
© 2018 Synerzip, LLC. | Confidential2
• It's a library to build cross platform UI, open sourced by Facebook
• Based on Components, State and Props
• Unidirectional data flow
• Super fast Virtual DOM diffing algorithm
• JSX to compose Components
• CSS in JS for UI and State Management tools like redux, mobx, etc
React
© 2018 Synerzip, LLC. | Confidential3
• It's a Framework to build a web application, open sourced by Google
• Follow MVC architecture by design
• Unidirectional data flow
• Two way data binding
• Dependency Injection
• Build tool chain already in place - Angular CLI
• Compiler, Forms, Router API, etc.
Angular
© 2018 Synerzip, LLC. | Confidential4
Traditional UI Architecture
Model View
Controller
State
Javascript
CSS
HTML
UI Library / Framework
© 2018 Synerzip, LLC. | Confidential5
• Easy To Learn
• Could take week or two
• JSX and Components - state and props
• Steep learning curve
• Could take month
• Component architecture and Angular
Fundamentals
Learning Curve
React Angular
© 2018 Synerzip, LLC. | Confidential6
• Based on Virtual DOM
• Minimal DOM manipulation
• Useful lifecycle hooks for optimization
• Lazy and Suspense for Code Splitting
• Angular is 5x faster than AngularJS(1.x
version)Super fast in view update
• Lifecycle hooks and change detection
variation for optimization
• Lazy loading for modules based on
routes
Performance
React Angular
© 2018 Synerzip, LLC. | Confidential7
• Stable JS library, more than 4 years now
• Strong community support for web and
mobile
• State management with one way data
flow
• Newer version is more than 2 years old
• Strong community support for web and
mobile
• Angular 2+ versions are smooth and
backward compatible
Stability
React Angular
© 2018 Synerzip, LLC. | Confidential8
• It’s View library, Component maintain its
own state and UI
• One way data flow to make JS code
maintainable and bug free
• It’s MVC framework, better separation
of concerns
• Angular CLI ensures the folder structure
and guideline are taken care.
Maintainability
React Angular
© 2018 Synerzip, LLC. | Confidential9
• Component based architecture
• One way data flow
• JSX to compose components
• 0 DOM interaction
• Component based architecture
• Application can be divided into multiple
modules and sub modules
• Directive helps adding behavior on top
of DOM
Scalability
React Angular
© 2018 Synerzip, LLC. | Confidential10
• Stable open source community
(awesome-react)
• Few example: react-router, redux, mobx,
react-bootstrap, material-ui,
react-native-base, react-navigation
• Offers everything out of the box routing,
i18, compiler, forms, material, etc.
• All the API’s are actively maintain by
Angular Core Team.
• Third party UI library exists like
devexpress, kendo, etc.
Ecosystem
React Angular
© 2018 Synerzip, LLC. | Confidential11
• Any choice for unit testing e.g. Jest,
Jasmine, Karma, etc
• Selenium for end to end testing
• Can use Jasmine, Karma, Jest, etc for
Unit Testing
• Protractor for end to end testing.
Testability
React Angular
© 2018 Synerzip, LLC. | Confidential12
Summary
1 way
Virtual DOM
Redux/Mobx/Flux
MVC
JS + Jsx
2 way
Regular DOM
Service / ngRx
Just View
Html + TS
Backed By
Binding
DOM
Application Logic / State
Architecture
Templating
© 2018 Synerzip, LLC. | Confidential13
Conclusion
• It's completely dependent on nature of project and team confidence
• Team Collaboration
• Small Teams
• Large Team
• Angular and React are awesome concept and great experience to build UI
© 2018 Synerzip, LLC. | Confidential14
Questions?
Please type your questions into the chat box.
© 2018 Synerzip, LLC. | Confidential16
SynerzipYour trusted partner for
Agile software product development.
• Accelerate the delivery of your product roadmap• Address technology skill gaps• Save at least 50% with offshore software development• Augment your team with optional on-site professionals
© 2018 Synerzip, LLC. | Confidential17
Who is Synerzip
Synerzip is your Agile software product development partner
500+strong team
Dual-Shorematured delivery model
110+product success stories
Inc. 5000awarded Inc 5000 6
years in a row
14+years in business
50%savings from
optimized delivery
DNAa truly agile product development partner
2Xaccelerate product
roadmap
© 2018 Synerzip, LLC. | Confidential18
Proud moment…
…100 more
© 2018 Synerzip, LLC. | Confidential19
Next Webinar
Creating Chaos...EngineeringWednesday, November 28
@ 1pm ET | Noon CT | 10am PT
Shahzad ZafarVice President of Engineering at Rx
Savings Solutions
© 2018 Synerzip, LLC. | Confidential© 2018 Synerzip, LLC. | Confidential
Texas4100 Spring Valley Road
Suite 308Dallas, TX 75244
Tel: +1.469.374.0500 | Fax: +1.469.322.0490
Silicon Valley New York
India3rd Floor, Revolution Mall,Above Big Bazaar, Kothrud,
Pune, India 411 038
Tel: +91.20.67283222 | Fax: +91.20.67283222
