React.js Overview via Alex Azarov  #webdev

React.js Overview via Alex Azarov  #webdev

  • Comparing React.js with Angular or other MVC frameworks makes no sense since React is just a representation.
  • Thus, a = b + c, and A will always depend on the values of B an C. – – React constantly works with the DOM, re-rendering it when conditions change (the part of the DOM that is changed by React.js is called a component).
  • Prior to React, such a practice would have seriously affected the application’s performance, but the developers of React.js approached this problem quite radically: they completely rewrote the DOM in JavaScript.
  • An important feature of React.js is the use of JSX.
  • There exist other extensions for React.js, however, considering the “weight” of the framework, their use should be minimized.

A discussion of the React.js web development framework, the pros and cons of this development tool, and who would be best suited using React in their projects.
Continue reading “React.js Overview via Alex Azarov  #webdev”

How I test redux-saga – codeburst

  • How I test redux-sagaI’m a fan of redux saga (although I’ve been keeping an eye on redux-observable too).
  • I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary.Because the saga effects only construct a special object that is consumed and executed by the middleware (aka they dont do much!)
  • , it is really easy to test your sagas with no mocking required.Few points of note:The mock result of the api (true or false) is injected into the subsequent next() call after the api call.
  • clone()” to test different control flow branches

I particularly like having all async logic in one place, making it easily testable and having powerful async control flows available where necessary. Because the saga effects only construct a special…
Continue reading “How I test redux-saga – codeburst”

What is ReasonML? #javascript #reactjs #Facebook #Reason

What is ReasonML?  #javascript #reactjs #Facebook #Reason

  • This blog post gives a brief high-level explanation of Facebook’s new programming language, ReasonML.
  • ReasonML is a new object-functional programming language created at Facebook.
  • In essence, it is a new C-like syntax for the programming language OCaml.
  • ReasonML also supports JSX (the syntax for HTML templates inside JavaScript used by Facebook’s React framework).
  • The ReasonML team also aims to improve the OCaml ecosystem: – – ReasonML feels much like what you’d get if you cleaned up JavaScript and turned it into a statically typed functional programming language.

This blog post gives a brief high-level explanation of Facebook’s new programming language, ReasonML.
Continue reading “What is ReasonML? #javascript #reactjs #Facebook #Reason”

AngularJS vs React – War of Facts

Good comparison of #angularjs vs. #reactjs 

#ibmioss #nodejs #javascript

  • Certain things remain unchecked in the web world, especially when it comes to major developer frameworks, AngularJS and ReactJS.
  • Both the frameworks are easy to use and have a high potential of building cutting-edge mobile and web applications.
  • For gaining more clarity over bot these frameworks let’s understand the same through an infographic.

Let us examine the popular features and functions along with the differences in both AngularJS and React
Continue reading “AngularJS vs React – War of Facts”

#AngularJS vs #ReactJS – Facts & Figures | An #Infographic worth scrolling #javascript #JS…

  • Certain things remain unchecked in the web world, especially when it comes to major developer frameworks, AngularJS and ReactJS.
  • Both the frameworks are easy to use and have a high potential of building cutting-edge mobile and web applications.
  • For gaining more clarity over bot these frameworks let’s understand the same through an infographic.

Certain things remain unchecked in the web world, especially when it comes to major developer frameworks, AngularJS and ReactJS. Both the frameworks are easy to use and have a high potential of building cutting-edge mobile and web applications. So which one is better? Well, both have their pros and cons. For gaining more clarity over bot these frameworks let’s understand the same through an infographic. Let us examine the popular features and functions along with the differences in both.
Continue reading “#AngularJS vs #ReactJS – Facts & Figures | An #Infographic worth scrolling #javascript #JS…”

Front end architecture – João Paulo Lethier – Medium

Front end architecture  #javascript #frontenddevelopment #react #reactjs #reactjs

  • So, almost every project I worked use MVC architecture, and when I started to work in some front end projects, using angular or react, I tend to structure my project’s folders and files thinking in MVC, using the same structure I would use in a backend project using RubyOnRails.Taking advantage that in my job team, at SumOne, we decided to organize some talks, I choose to do a talk about front end architecture so this would be an opportunity to learn.
  • Besides the type based folder structure, that is similar to MVC structure folders and what I was used to, I found that most front end developers recommend a feature based folder structure to organize project’s code files.So, I did a small presentation and develop a sample project on github to show how a react project would like on each kind of folder structure: type based, feature based and mix based.
  • For example, if you have a list feature, you would have the API file that make the request call to get items to list, action file that call API and return the answer to view and view file itself on the same folder.Lastly, you can use a mix based folder structure, organizing by feature first, and inside of each feature folder.
  • This structure makes easy to find all code related to a feature, for example, if we have a search feature and want to change the api request for the search form, I just have to search for the api file on search feature folder.
  • Following this mix based structure, if you have a large feature, that has a lot of code files, more than one api call, for example, you can organize files by type(API, Services, Actions, Views, Styles, …) inside the feature folder.

I am a developer since 2010, but only recently I started to work a little more with front end frameworks. I’ve worked a lot more with backend development, I have a lot more experience creating and…
Continue reading “Front end architecture – João Paulo Lethier – Medium”

React Native + Meteor: react-native-meteor vs. meteor-client-bundler

React Native + Meteor: react-native-meteor vs. meteor-client-bundler  #javascript

  • React Native + Meteor: react-native-meteor vs. meteor-client-bundlerIf you’ve spent any time looking into building an app with React Native and Meteor you’ve likely come across the package react-native-meteor.
  • You may have also come across meteor-client-bundler which is a newer entry in the game.So what are they?Each package is designed to allow you to easily connect to and work with a Meteor server, via DDP, from a client that isn’t integrated with the Meteor build tool.They do this in different ways, each with benefits and drawbacks.This package integrates within your React Native app and is designed specifically for React Native.
  • This is an open source package where people are maintaining it on the side.Getting StartedIf you’re interested in getting up and running with a React Native + Meteor stack that uses react-native-meteor check out the boilerplate I’ve put together.Thank you to everyone that has made this package a reality and continues to put the time into maintaining it.
  • #ThankOSSMaintainersUnlike react-native-meteor this package is designed to work for any client — it was actually built when getting an Ionic app to work with Meteor.It also works in a different way — it’s a command line tool that will bundle the Meteor client code and put it into your React Native project rather than being a package that simply “speaks” DDP to communicate with a Meteor server.
  • So whenever you change something in your Meteor app you’ll want to re-bundle the client side code.BenefitsTakes the actual client side Meteor code and injects it into your React Native app making sure you’re running exactly what’s on the Meteor server.Use the “real” packages coming from Meteor.DrawbacksPotential mismatch of code injected between what’s running on the Meteor server and what’s on your user’s app.Dependence on the DOM.

If you’ve spent any time looking into building an app with React Native and Meteor you’ve likely come across the package react-native-meteor. You may have also come across meteor-client-bundler which…
Continue reading “React Native + Meteor: react-native-meteor vs. meteor-client-bundler”