Posts

Showing posts with the label Javascript

Understand promises before you start using async/await

Referal link:  https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8 Understand promises before you start using async/await With Babel now supporting async/await out of the box, and ES2016 (or ES7) just around the corner, more and more people are realizing how awesome this pattern is for writing asynchronous code, using synchronous code structure. This is a good thing™, and ought to improve code quality a whole lot. However, what a lot of people may have missed is that the entire foundation for async/await is promises . In fact every async function you write will return a promise, and every single thing you await will ordinarily be a promise. Why am I emphasizing this? Because so much javascript written today is written using the callback pattern, a lot of people just never got on the promise bandwagon, and they’re missing an important part of the async/await puzzle. What even is a promise? I’ll keep this b...

Beginner’s guide to Webpack

Image
Beginner’s guide to Webpack Referal Link:  https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460 Or what I wish I knew when starting with Wepback. Click here to go to the final Github repo. We are using Webpack 1.x. Webpack 2 will not work with this tutorial. Click here to view the Webpack changelog. Webpack is the latest and greatest in front-end development tools. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others. As a beginner to Webpack, this is what I have learned. This tutorial has been updated to use Babel 6 Getting Started Webpack Conventions Webpack works best with NPM, not Bower Uses a module system (AMD, CommonJS, ES6) Installing Webpack globally: npm install webpack -g The most basic of builds: In your root directory create 2 files: index.html & app.js In app.js: document.write('welcome to my app'); console.log('...

When to use Component or PureComponent

Reference:  https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81 When to use Component or PureComponent I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached. Let’s dig in to PureComponent and understand why we should be using it. Component and PureComponent have one difference PureComponent  is exactly the same as  Component  except that it handles the shouldComponentUpdate  method for you . When props or state changes,  PureComponent  will do a  shallow comparison  on both props and state.  Component  on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever  shouldComponentUpdate  is called. Shallow Comparison 101 When comparing previous props and state to next, a shal...

Strict equality (===) - Loose equality (==)

  Operand B     Undefined Null Number String Boolean Object Operand A Undefined true true false false false false Null true true false false false false Number false false A === B A === ToNumber(B) A === ToNumber(B) A == ToPrimitive(B) String false false ToNumber(A) === B A === B ToNumber(A) === ToNumber(B) A == ToPrimitive(B) Boolean false false ToNumber(A) === B ToNumber(A) === ToNumber(B) A === B ToNumber(A) == ToPrimitive(B) Object false false ToPrimitive(A) == B ToPrimitive(A) == B ToPrimitive(A) == ToNumber(B) A === B