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


• 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


Traditional UI Architecture

Model View

Controller

State

Javascript

CSS

HTML

UI Library / Framework


• 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


• 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


• 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


• 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


• 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


• 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


• 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


Summary

Facebook

1 way

Virtual DOM

Redux/Mobx/Flux

MVC

JS + Jsx

Google

2 way

Regular DOM

Service / ngRx

Just View

Html + TS

Backed By

Binding

DOM

Application Logic / State

Architecture

Templating


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


Questions?

Please type your questions into the chat box.


Mike WatsonVP of Engineering

[email protected] 917-573-2878

mailto:[email protected]


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


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


Proud moment…

…100 more


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

[email protected]

webinar angular vs. react don’t roll the dice and mike ......• any choice for unit testing e.g....

Documents