Month: January 2020

Posted in Design Pattern, Flux, Framework, React, React Native, ReactJS, Redux

MVC vs Flux vs Redux

Posted on by learnwithsomayeh

logos

 

MVC – Model View Controller: Architectural design pattern for developing UI

Flux: Application Architecture to build client-side web applications.

Redux: open source JavaScript library used to create UI; generally works with Angular and React development.

—————————————————————————————————————————————–

MVC: the core idea of MVC is Separaion of Concerns (separation of presentation from the model and Controller from the view)

  • Model: Maintain the data and behavior of an application
  • View: The UI logic that represents/ displays the data (model)
  • Controller: The logic that links the model to the View and external inputs (take user input, manipulate the model and causes the view to update)

mvcArch

Flux:

Actions: Helper methods that relay information to the dispatcher.

Stores: contains App’s logic and state (Models in MVC are single objects but Store in Flux can store anything)

Dispatcher: Coordinate the Actions and updates the Stores

View: same as the view in MVC but in the context of React & Flux (include Controller-Views for change events – retrieve App’s state from Stores)

fluxArch2

Redux:

Actions: Collection of functions to perform request on server (send data between the Store and the App)

Reducers: Update the state of the Store

Store: Holds the app state and supply the helper methods for accessing the state.

reduxArch

 

  MVC Flux Redux
Introduced 1976 Few years ago 2015
Architecture Architectural Design Pattern for developing UI Application architecture designed to build client-side web apps Open-source JavaScript library used for creating the UI

Generally works with react & Angular
Data flow Direction Follows the bidirectional flow Follows the unidirectional flow Follows the unidirectional flow
Single / Multiple Stores NA Includes multiple Stores Includes single Store
Store modifiable NA mutable Immutable (read-only)
Handle biz. Logic Controller Store Reducer
Handle debugging Difficult due to bidirectional flow Simple debugging with the dispatcher Single Store makes debugging lot easier
Usage In both client & server-side frameworks client-side framework client-side framework
Support –          Front-end frameworks like AngularJS, Ember, Backbne, Sprout & Knockout

 

–          Back-end frameworks like Spring, Ruby on Rails, Django, Meteor

 Front-end framework like React, AngularJS, Vue.js & Polymer Front-end frameworks like React, Vue.js, AngularJS, Ember, Backbone.js, Meteor & Polymer
Scability Complex Easily –
key Data binding Events / actions –
  Synchronous Asynchronous –

 

References:

1- https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences

2- https://syndicode.com/2017/09/19/flux-vs-mvc/

 

Posted in Android, Framework, iOS, JavaScript, Library, mobile development, React, React Native, ReactJS

ReactJs vs React Native

Posted on by learnwithsomayeh

It doesn’t sound right to compare “ReactJS” with “React Native” as they’re not variation of the same category;

  • “ReactJS” (called React) is a “Library” of JavaScript.
  • “React Native” is a mobile JavaScript “Framework” that allows the user to utilize the ReactJS for building up the components.

ReactJS created by Facebook team in 2011 and basically built to create user-friendly reusable UI components.

React Native built by Facebook in 2015 providing the React architecture to native iOS, Android and Windows applications. React Native facilitate cross-platform native app development (Single Environment for multiple platform) and combines the React components with native codes( Java, Objective-C and etc.)

 

Posted in ASP .Net, C#, Core Java, Design Pattern, Framework, Inversion of Control, Java EE, Library

Library vs Framework

Posted on by learnwithsomayeh

The key difference between Library and Framework is in IoC (Inversion of Control)

  • by using a feature from a Library you are in control.
  • The Framework include some abstract design with built-in behaviors. Control is inverted and the framework calls you; framework code will call the code at those various points that behavior has inserted. The Hollywood principle: Don’t call Us, we’ll call You.

Library

Framework
A certain set of reusable functions of an application (mostly organized into classes) As a skeleton of an application
A collection of class definitions A collection of patterns
You call the library APIs in your code A framework calls your code
The control is always with you The control in with the framework if you’re using it
Libraries meant to do some specific tasks only Framework is a predefined design
You need to scaffold your project manually Super easy to scaffold