Accessing Nested Objects in JavaScript

  • tldr; safely access nested objects in JavaScript in a super cool way.
  • One of those things is the confrontation with this error when you try to access a nested object, – – Most of the times when we’re working with JavaScript, we’ll be dealing with nested objects and often we’ll be needing to access the innermost nested values safely.
  • But, for some reason, if our user’s personal info is not available, the object structure will be like this, – – Now if you try you access the name, you’ll be thrown Cannot read property ‘name’ of undefined.
  • The usual way how most devs deal with this scenario is, – – This is okay if your nested structure is simple, but if you have your data nested 5 or 6 levels deep, then your code will look really messy like this, – – There are a few tricks…
  • Unfortunately, you cannot access nested arrays with this trick – – Array reduce method is very powerful and it can be used to safely access nested objects.

Accessing nested objects in JavaScript without getting choked by ‘cannot read property of undefined’ error
Continue reading “Accessing Nested Objects in JavaScript”

Statistical models from R and Interactive apps from Javascript • jsReact

  • jsReact is designed to help you utilise JavaScript’s visualisation libraries and R’s modelling packages to build tailor-made interactive apps.
  • jsReact is currently not available from CRAN, but you can install the development version from github with:

Continue reading “Statistical models from R and Interactive apps from Javascript • jsReact”

nohoist in Workspaces

  • First, let’s take a quick tour on how hoist work in standalone projects: – – To reduce redundancy, most package managers employ some kind of hoisting scheme to extract and flatten all dependent modules, as much as possible, into a centralized location.
  • In such project, modules could be scattered in multiple locations: – – yarn workspaces can share modules across child projects/packages by hoisting them up to their parent project’s node_modules: .
  • Consequently, workspaces developers often witness “module not found” related errors when building from the child project: – – For this monorepo project to reliably find any module from anywhere, it needs to traverse each nodemodules tree: *“monorepo/nodemodules”* and .
  • There are indeed many ways library owners can address these issues, such as multi-root, custom module map, clever traversing scheme, among others… However, – – It is frustrating when a solution worked for a standalone project only fell short in the monorepo environment.
  • Module path is a virtual path of the dependency tree, not an actual file path, so no need to specify “node_modules” or “packages” in the nohoist pattern.

As wonderful as yarn workspaces are, the rest of the community hasn’t yet fully caught up with the monorepo hoisting scheme. The introducing of the nohoist i…
Continue reading “nohoist in Workspaces”

Getting started with code splitting using react-loadable • matwrites

  • One of the most popular ways of making our React app load faster is code-splitting.
  • It has a huge impact on the performance by not letting the user download the whole app with vendors at once (we can easily achieve bundle size around ~2mb by adding most common tools and libraries).
  • One of the methods to split our code is to bundle vendors and the app separately.
  • That way our end-user doesn’t need to download the whole bundle and is being served with required chunks of the package when they’re really needed.
  • What if we split our bundle around the components that actually import specific bundle parts instead of splitting the code around routes at which they are required?

Developing and building our client-side apps has never been easier. NPM and it’s registry is giving us an access to thousands of thousands of packages. Installing them and attaching to the project is super easy today, but it has one major disadvantage: increasing bundle size.
Continue reading “Getting started with code splitting using react-loadable • matwrites”

Essential React Libraries in 2018

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals: – – But it is so much easier with the classnames library: – – It works perfectly with CSS modules too.
  • The library is for many people almost mandatory in applications when it comes to conditional stylings in React.
  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts: – – Basically you wouldn’t have to add any other library to do the job.

Often it is difficult to find all the relevant libraries to complement your React application, because React’s ecosystem is a flexible yet large framework. The article gives you an opinionated React setup by choosing essential libraries: Redux, MobX, React Router, Flow, Styled Components, Lodash, Ramda, Prettier, Axios, …
Continue reading “Essential React Libraries in 2018”

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

Mobdux: combining the good parts of MobX and Redux  #ReactJS #Redux #Mob

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component…
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

Typescript or Flow – Product at Home

#Typescript or #Flow: What’s your type?  #ReactJS

  • If you spend your days making 100-line apps or scripting stuff in a console, maybe adding types is not the thing for you.But if you’re working on bigger apps or libraries, spending a couple of hours to set up and learn the basics of TS or Flow will bring you…
  • You end up with a more robust and reliable code base.What really matters for you as a developer is the final outputI see a lot of guides, sometimes really good ones, focussed on the structural and implementation differences between TS and Flow — TS is a language, Flow isn’t etc. — but these aren’t the…
  • Let’s see what warnings TS and Flow are giving me:Typescript error messageFlow error messageTypescript clearly gives us the solution to fix the problem, whereas Flow just flags a type incompatibility.Errors on missing propsFor me this one is the biggest issues with Flow: Instead of having the error in the Title / component like…
  • Better yet, I could avoid this problem altogether in TS by taking advantage of with Atom and VS Code are fine, but from personal experience, Typescript remains faster than Flow, especially on large projects.So it looks like Typescript is clearly the best choice, or is it?Setup:If you have an existing project…
  • You’ll still need your unit and e2e tests to be sure that your app is running as expected.Both Flow and Typescript are awesome ❤ and I’m really happy that both of these solutions exist.

tldr; You’re not a machine. You just can’t catch all bugs and know your (and your team’s) code by heart and it’s not your job. So add static types! Ok, let’s clarify something here. If you spend your…
Continue reading “Typescript or Flow – Product at Home”

React’s Ecosystem as a flexible Framework

React's Ecosystem as a flexible Framework - RWieruch  #reactjs #javascript

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”

React’s Ecosystem as a flexible Framework

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals:

    But it is so much easier with the classnames library:

    It works perfectly with CSS modules too.

  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts:

    Basically you wouldn’t have to add any other library to do the job.

  • However, there are common use cases for React’s higher order components that are already solved in a library called recompose.

React’s ecosystem is a flexible framework. The article gives you an opinionated ideal React setup choosing essential libraries…
Continue reading “React’s Ecosystem as a flexible Framework”

Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component hierarchy.No pass-through props, where a component forwards props to its children despite not needing them for its own rendering.Easier to test / re-use / write storybook stories for the dumb components that are only interested in rendering.Dumb components are completely decoupled from Redux, allowing for re-usability if the consumer decides to change state frameworks (to MobX or relay for example).
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”