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”

What is MobX? Explain like I am five 👋

  • By beginner, I expect at least to know what global variables, modular architecture and scope are.
  • Since this beginner doesn’t really know what is (thus also what state management is), I’d like to compare MobX to a fancy global variable(s).
  • Some really really novice developers might make it work with global variables and be happy.
  • Then, MobX will do so much more than just keep it accessible to other modules, it can execute some actions (calculations) to them, let your modules know as soon as some property changes, etc.
  • While MobX is just another state management tool, in my opinion it’s the best one to compare to ease of understanding global variables.

Answer (1 out of 2): Imagine mommy is making pancakes for you and your siblings. It’s a birthday party! She will keep bringing pancakes as long as you are hungry and having fun. She will also keep track of how many pancakes you ate and she knows what kind of pancakes you…
Continue reading “What is MobX? Explain like I am five 👋”

Improving the usability of your modules – kentcdodds

Improving the usability of your modules  #reactjs

  • All you have to do is use it:import getContentForFile from ‘react-i18n’const i18n = App() { return ( div h1{i18n(‘header.title’)}/h1 /div )}So that’s how it works (again, I’m sure some of you are thinking of other libs that could do this better, but please spare me the “well actually.” I’m aware…
  • const content = JSON.parse( … more stuffexport {getContentForFile as default, init}This presents a few challenges for users of the module.
  • Turns out that react-i18n actually exposed another module react-i18n/bootstrap to customize this behavior which is great, but that doesn’t resolve the problem of stuff happening if someone were to import react-i18n first.So what I did was a wrapped all side-effects in a function I exported called init(which was similar to…
  • But it’s ok now because that’s clear const messages = JSON.parse( ) // … other other stuff}// … more stuffexport {getContentForFile as default, init}So this means that anyone using the module now must call the init function, but they’re doing that on their own terms and whenever they want it…
  • However, we’re in the process of “inner sourcing” this module (and perhaps open sourcing it eventually), so folks are going to use it who use different tools and have different use cases.So, if it’s not too much work and doesn’t add too much complexity, then try to make the solution…

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This last week I worked on my…
Continue reading “Improving the usability of your modules – kentcdodds”

React Native and ReactJS – Ahmed Mahmoud – Medium

React Native and ReactJS  #react #frontenddevelopment #webdevelopment #reactjs #reactjs

  • React Native and ReactJSThey’re not quite the sameReact Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows).
  • It’s quite similar to ReactJS in a way, however there are some differences between React Native and ReactJS.Is a framework:React Native is a framework, but ReactJS is a JS library.
  • Meaning, for ReactJS you’ll need a bundler like webpack and then you’ll figure out which modules you’ll need for the project, on the other hand, you won’t need any bundler or any other tools to bootstrap your project, only react-native-cli.
  • Doesn’t have HTML:In React Native, you won’t have html elements, you’ll have instead alternative components that work in a similar way, and they map to actual IOS and Android UI components that renders on the app.Because you’re not rendering HTML, you can’t use any ReactJS library that renders HTML, but you most probably will find alternative React Native libraries here.CSS only in JS:In React Native, styling is only done in JS, and it’s not exactly CSS, and it doesn’t always behave like it, nevertheless it looks pretty much like CSS.No CSS Animations:In React Native, you don’t have CSS Animations, the recommended way to animate a component is using Animated API.Developer tools for Code, not for UI:You still can use the same Chrome DevTools to debug your app, also you can use Redux DevTools to inspect the state of your app, but still you can’t inspect the UI with Chrome DevTools, you’ll have to use the platform native inspector (XCode/Android studio).
  • Tools:XCode (for IOS)Andriod Studio (for Andriod)Device (if you don’t want to run the app only on simulators)Here’s a React Native crash course that’ll help you get started really quickly.

React Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows). It’s been…
Continue reading “React Native and ReactJS – Ahmed Mahmoud – Medium”

Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium

Atomic design, Angular 2 and Redux  #angular #webdevelopment #redux #design #reactjs

  • How do you setup the frontend to be quick in prototyping?As a ux’er, you probably heard of Brad Frost and his idea of Atomic Design.
  • It’s basically a design system to divide your frontend into components.
  • And because it is a ux design system, communicating with the ux’er is very easy.
  • When an event is needed in one of the components, it just fires it to the Redux store, the centralised state is updated and all subscribed components are updated afterwards.
  • In my experience, atoms and molecule level for the input/output system and the organisms and templates to the redux store.

A match made in heaven. Last year I got the change to start a whole new product in the rol of frontend architect & developer. The starting team was only a product owner, ux’er and myself to start off…
Continue reading “Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium”

React enables use of code from WordPress in other Open Source projects

  • React enables use of code from WordPress in other Open Source projects
  • WordPress Calypso is a shell for WordPress, that uses the REST APIs to communicate to the backend.
  • WordPress is a hugely popular Open Source.
  • Some sources claim a whopping 25% of all web sites are powered by WordPress.
  • With the WordPress Calypso project being Open Source, the component based architecture allows use of WordPress components outside of WordPress.

WordPress is a hugely popular Open Source. The blogging platform turned content management system runs a large portion of the web. Some sources claim a whopping 25% of all web sites are powered by WordPress. But it has had limited effect on other open source projects.
Continue reading “React enables use of code from WordPress in other Open Source projects”