Webinar Angular vs. React Don’t roll the dice and Mike ......• Any choice for unit testing e.g....
Transcript of Webinar Angular vs. React Don’t roll the dice and Mike ......• Any choice for unit testing e.g....
© 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