Tuesday, July 23, 2024

Flutter , Angular and React

 

Flutter

1.       Google created.

2.       Open source Flutter software development framework

3.       create mobile applications for iOS and Android from a single Dart codebase.

4.       Flutter utilizes Dart, object-oriented programming language optimized specifically for developing mobile apps and web apps

a.       Dart code is compiled ahead of time into native machine code using the Flutter compiler, enabling apps to achieve exceptionally high performance.

5.       A standout feature of Flutter is its incredibly fast hot reload functionality, which allows developers to experiment rapidly and visualize changes in UI almost instantly without losing the application state.

6.       create mobile app interfaces reflecting Google's modern design principles using Material Design and Cupertino widgets.

7.       Flutter has a widget binding, namely InheritedWidget. It binds two or more widgets together (one provider and some consumers) so that whenever one updates, all of its dependencies are forced to update too.

8.       Popular apps built using Flutter include Hamilton Broadway Musical, Google Ads, eBay Motors, Groupon, Reflectly meditation app, etc.

 

Pros

 

  • ·       Single Dart codebase to build iOS and Android apps
  • ·       Stateful hot reload enables instant visual updates without recompilation
  • ·       Excellent performance powered by Dart's compiled machine code
  • ·       Extensive catalog of customizable Material and Cupertino widgets
  • ·       Increased software development speed and iteration facilitated by features such as hot reloading
  • ·       Expressive and easy-to-learn Dart programming language

Cons

  • ·       As a relatively new SDK, it has a smaller ecosystem of libraries and tools than older alternatives.
  • ·       Restricted access to some exclusive platform-specific APIs and features
  • ·       Primarily focused only on mobile app development, it is less suitable for web
  • ·       Very few developers know the Dart programming language, leading to a talent shortage
  • ·       Architectural changes and breaking updates are likely as the framework matures 

Angular

1.       by Google

2.       web application development framework

3.       Angular apps are written in TypeScript, an enhanced version of JavaScript that brings optional typing and other improvements aimed at large-scale apps. 

4.       The framework uses an MVC architecture style to separate an app's concerns into distinct Models, Views, and Controller components.

5.       two-way data binding, which automatically syncs data between model and view

6.       dependency injection to manage relationships between various app modules.

7.       Popular Angular sites include PayPal, NBC, UPS, Lego, and Forbes.

 

Pros

  • ·       The full-featured framework integrates a wide range of web functions
  • ·       MVC architecture enables the separation of concerns
  • ·       Powerful data binding(two-way) synchronizes model and view components
  • ·       Extensive toolbox including testing suites, lint test
  • ·       High focus on reusability and maintainability
  • ·       Simplifies form building and form validation
  • ·       The large community provides many reusable libraries
  • Cons
  • ·       Steep learning curve due to the vast API surface area
  • ·       More complex compared to lighter-weight libraries like React
  • ·       Bulkier apps due to a large framework codebase
  • ·       Longer bootstrap and rendering times result from complexity
  • ·       Demands strong TypeScript knowledge
  • ·       Upgrades between versions may require significant rework

React

1.       by Facebook 

2.       open-source JavaScript front-end library 

3.       use to build interactive user interfaces and web application front-ends

4.       React aims to simplify the development of complex, changing data flows in web UIs

5.       React builds on basic HTML/CSS/JS to provide a declarative component model. 

a.       UIs are broken into encapsulated, reusable pieces called components. 

6.       Components use a templating language called JSX that resembles HTML to render content, can have a local state, and update dynamically in response to data changes.

7.       Events triggered from one component bubble up to notify parent components automatically through a unidirectional data flow paradigm. ( first the model state is updated, and then it renders the change in the UI element. )

8.       Virtual DOM tracking of changes combined with selectively re-rendering only components that change enables very high performance compared to raw JavaScript ops.

a.       This helps power data-intensive apps like Facebook and Instagram that show constantly updating content flows.

9.       Popular Apps

Facebook, Airbnb, Uber, Netflix, Instagram, WhatsApp, Dropbox etc.

 

 

Pros

  • ·       Promotes reusability via encapsulated components
  • ·       Components offer separation of concerns
  • ·       Virtual DOM provides excellent performance gains
  • ·       Unidirectional data flow simplifies data handling logic
  • ·       The large open-source ecosystem of reusable React component libraries
  • ·       Easy integration into existing codebases
  • ·       The growing developer community provides abundant support resources

Cons

  • ·       Only handles the view layer, not a complete framework
  • ·       Many auxiliary libraries are needed for complex apps (routing, state management)
  • ·       Code complexity from JSX and nested component trees
  • ·       Steep learning curve mastering inner workings like state and lifecycle
  • ·       Rapid evolution means breaking API changes, which is not uncommon
  • ·       Less out-of-box project scaffolding sets up


Tech Stack

Flutter uses the Dart programming language and provides its robust widget set for building mobile interfaces. This allows it to compile code into native machine code for excellent performance.

Angular utilizes TypeScript, a typed superset of JavaScript and HTML and CSS, for building responsive web applications. It compiles down to plain JavaScript code to run in browsers.

React Native is based on the React JavaScript library and uses the same paradigm of components. It compiles code to native UI components while communicating with native code through a JavaScript bridge.

 

Learning Curve

Flutter offers a moderately easy learning curve for developers with prior experience in object-oriented code and mobile development. Its declarative widget-based approach is intuitive.

Given the complexity of its technology stack, Angular has a rather steep learning curve, including TypeScript, components, directives, services, dependency injection, and hierarchical injectors.

React Native is moderately easy to get started with for JavaScript developers who understand React concepts like components, states, and props. However, bridging to native code can have a learning curve

 

Flutter vs Angular vs React: The Ultimate Showdown [2024] (simplilearn.com)

https://www.javatpoint.com/angular-vs-react

https://stackoverflow.com/questions/52590759/does-flutter-have-data-binding

Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)