Best practices for JavaScript function parameters

  • The problem with passing an object as a parameter to a function is that it’s not clear what values you should put into it.
  • One common thing in FP is to partially apply your functions, which is much harder to do if your function takes its parameters as an object.
  • While separate parameters are a good starting point, we run into trouble as soon as the function has optional parameters.
  • For functions with a single optional parameter, the solution is simple:

    Best practice: optionals come last

    However, if we have more than one optional parameter, the problem is… what if we only need to pass one optional parameter?

  • You can pass in parameters easily as an object, but the properties for the object can be easily seen from the function’s signature.

From time to time, people ask things like “should I use objects to pass function arguments”. I’m sure you recognize the pattern, as it’s common with many libraries:
Continue reading “Best practices for JavaScript function parameters”

Maximizing Debuggability with Redux – LogRocket

Maximizing Debuggability with Redux  #javascript #react #logging #debugging #redux #reactjs

  • By using front end logging tools like LogRocket, developers can easily understand and fix tricky bugs in production by reviewing the actions and state changes leading up to a bug.While this information is immediately useful in any Redux app, there is a lot more we can achieve by architecting an app with logging in mind.
  • When debugging issues, we can dig into this state object to see information on in-flight requests, queryCount (if we’re polling on a query), and timings.Storing this information in Redux is critical, since it puts full context on all network activity in the Redux logs.Rolling your own data fetching “framework”If you’d prefer a simpler approach, you can roll your own data fetching “framework” by simply dispatching explicit actions when querying and receiving data from the network.For example, lets say we’re building a blogging app.
  • This would then update state appropriately to:postsQuery: { url: ‘api.blog.com/posts’, isPending: true, data: […],}This example is far from thorough, but the idea is that by being explicit with Redux actions for each part of the request lifecycle, it becomes easy to debug any potential race condition or network error.Handling other sources of non-determinismIn addition to network fetching, there are lots of other sources of non-determinism that can cause bugs.
  • For example:myWebSocket.onmessage = function (event) { store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, } store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, }That way, when looking at the Redux logs for an error or user-reported issue, we can see all the data that was received over the websocket and, crucially, relate it in time to other redux actions and network requests.Local StorageOften, an app needs to read from local storage when it first starts up.
  • Once you get the library set up, you’ll see a new key in your Redux store called routing with information on the current router state.In addition, react-router-redux dispatches actions like @@router/LOCATION_CHANGE when its state changes.Also of note is that using react-router-redux lets you rewind router state when time-traveling in redux-devtools, since its state its state is derived from the state in Redux.A note about local vs Redux stateI don’t want to get into the debate on local vs Redux state here, but production Redux logging does change the calculus of this decision in some cases.

In my last blog post, Redux Logging in Production, I discussed one of the most important benefits of using Redux — debuggability. By using front end logging tools like LogRocket, developers can…
Continue reading “Maximizing Debuggability with Redux – LogRocket”

How to Be A JavaScript Developer – Ken Rogers – Medium

How to Be A JavaScript Developer  #meteor #javascript #webdevelopment #react #reactjs

  • But I’ve always found that the best way to learn web development is to just build things.Meteor is a great way to get started just building things.It’s become a little more complex since its early days, but with the right setup and direction, it can still be a great way to bootstrap reactive applications.I think it’s a fantastic way to get started learning JavaScript development, or branch out into a new framework if you’ve already been using JavaScript for a while.So I wanted to put together this little guide that will serve as a potential path to learning web development with Meteor and React.All of these are resources that I have personally used and have served me well in learning.
  • Learn ES2015This free walkthrough of ES2015 does a great job of introducing you to the basics and walking you through how to use all of the new shiny things.Step 2 — Learn MeteorAlright, now that you’re familiar with JavaScript and its new syntax and capabilities, it’s time to dive in to Meteor.The Meteor TutorialThe official tutorial from Meteor.
  • The Meteor GuideAfter you’ve been introduced to Meteor with the tutorial, dive in to the guide to learn how to structure your project, and to get some more in depth knowledge on the finer points of MeteorStep 3 — Learn ReactSo you’ve got a decent handle on Meteor, not let’s dive into React.The React DocsThe official React docs do a good job of introducing you to the concepts and how to think in a React-ish way.2.
  • It also comes with GitHub source code so you can use it as an example.Phase 2 — BuildStep 1 — Experiment with BaseNow that you’ve got a good grasp on how to develop using Meteor and React, it’s time to start building things.Base is a Meteor boilerplate project to help you bootstrap your Meteor projects.It’s built with React and also uses React Router.In my opinion, downloading Base and digging into it, hacking on it, and using to as the starting point for your own project is one of the best ways to learn development with Meteor.By digging into Base, you’ll get an idea of best practices when building things with Meteor and React, and you’ll be able to use it as a template for building projects.Using the books and courses from the Learn phase as your foundation, you’ll be able to understand how Base is put together and how it all works.Really take the time to dig into every different component and figure out how everything is working.
  • Resist the urge to bounce around from framework to framework, constantly switching to whatever seems coolest.Instead, find problems that need to be solved, figure out a way to solve them with web applications, and then find the proper tool for the job.One of the most important skills for a professional developer is being able to build usable applications that solve real problems for real people.If you can find examples of those out in the wild, and build up a portfolio of yourself solving those with web apps, you’ll be indispensable.So now that you know the basics of JavaScript development with Meteor and React, I want you to get out there and start using that knowledge to solve real problems.Share that knowledge and those solutions with others.

A few years ago, I stumbled on a video of somebody making a responsive, real-time web app using something called Meteor. If you haven’t seen it yet, I recommend giving it a watch. It was pretty…
Continue reading “How to Be A JavaScript Developer – Ken Rogers – Medium”

Building a new backend — Part 1 – lookapanda – Medium

Building a new backend — Part 1  #discord #webdevelopment #react #javascript #node #reactjs

  • Building a new backend — Part 1In this story I’d like to document my experiences in building a new backend.It represents my personal experiences and is not related to my profession as a Software Engineer.What is the backend for?This is a legitimate question, of course.
  • There is no real goal yet, I see it more like a personal challenge and practice.Some of my first pieces of code using LaravelI already built a backend quite some time ago already written in PHP using Laravel.
  • Times change quickly in a developers world and today I’m mostly programming in JavaScript (ES6, Node, etc.) and not that much in PHP anymore.Today (2017) I want to create something new again using the most modern technologies I can find.
  • REST APIs access information after all and said information needs to be stored somewhere.With my PHP API I was using MySQL (or actually MariaDB) and with my Node API it was MongoDB.
  • It should be easy to use but also powerful.In my next blog post I will share my first experiences in using Cassandra for building the database and probably also my decission for the framework I’ll be using.If you’ve come so far to read this very line, I want to say thank you.

In this story I’d like to document my experiences in building a new backend.
It represents my personal experiences and is not related to my profession as a Software Engineer. This is a legitimate…
Continue reading “Building a new backend — Part 1 – lookapanda – Medium”

Creating a Plugin System and Preact in Pictures

  • Preact is an implementation of the React API that’s significantly smaller and faster.
  • If you’ve ever wondered how the virtual dom and component model really work, this will be a great introduction that should prepare you for reading the source code of Preact or React.
  • After hearing this talk, you’ll have a great new tool for developing performance-critical UIs and a better mental model of how React works on the inside.
  • Creating a Plugin System with Apollo and the Coral Project by Riley Davis

    The Coral Project attempts to rethink how we create community online with open source tools and best practices.

  • This talk is about how we enabled development of third-party plugins with Apollo and GraphQL to help publishers adapt our commenting platform to meet their needs.

Come downtown for food, drink, talks, and socializing. We’ll be talking about ReactJS and related technologies. There is a lightrail stop at the corner of
Continue reading “Creating a Plugin System and Preact in Pictures”

Some tips for getting started with React – DailyJS – Medium

Some tips for getting started with #React – DailyJS – Medium  #ReactJs

  • I initially spent an equal amount of time looking at Angular, Aurelia, React and Vue… but eventually settled on React.This isn’t to say that I think that React is “better” just that it was the best fit for my specific requirements.I’m a great believer in using the right tool for the job, you may have the best hammer in the world — but you shouldn’t try to use it to screw something together.React is a mature library so many best practices have been established, however I found that I didn’t fall into them immediately and had to learn them the hard way.If you’re a newcomer to React (and bear in mind that I’m no expert) you may find this advice useful…Start with “create-react-app”When I started out in the world of Node.js / npm based development I began by building a development environment from scratch.Whilst this was a valuable learning exercise I later found that not only did the “create-react-app” project provide a great starting point but the awesome comments throughout the “react-scripts” project (that you can browse in your node_modules folder or gain access to through ejecting) were incredibly informative.You might find that you don’t keep using it in the long term, but as a playground for getting up and running with React to learn it I don’t think it can be beaten.Keep reading the Official DocumentationThere are loads of great articles, tutorials and blogs out there but I’ve found myself repeatedly going back to the official docs.
  • Fortunately the error messages in React are exceptionally good and lead me straight back to the right page in the documentation that explained and solved the problem.Set state with a function, not an objectI’ve seen this recently in blogs and tweets.
  • Although it’s not caused me any problems I’m learning my lesson from the previous example and will update my code now to avoid issues in the future.Pick the right editorI’d been a Sublime Text user for years and still absolutely love it.
  • I still use Sublime Text for other JavaScript projects (just as I use Eclipse for Java projects) but Visual Studio works for me… as I wrote earlier, always pick the right tool for the job.Learn the Life CycleI’ve found that when creating React components I need to think differently about how to approach problems and that understanding the component life-cycle really helps find the solutions.One really valuable tip I’ve found is to make sure that if a component needs to derive state from props then you need to process those props in both the constructor and componentWillReceiveProps (especially when the component is going to be receiving new properties from its ancestors) as this has caught me out on more than one occasion.I would certainly recommend working through problems more than once (and a good set of unit tests can really help here) as switching my way of thinking from an object-oriented approach to a functional composition approach can be quite challenging at first.
  • I don’t expect them to be revelatory to anyone with a great deal of React experience but it was valuable to me to think about and log what I’ve learned over the past few months.If you have any feedback or suggestions for other good practices then please let me know!

I’ve been developing web applications for many years but until recently was constrained to developing on (and for) a Java stack that had to support old versions of Internet Explorer. This left me…
Continue reading “Some tips for getting started with React – DailyJS – Medium”

Creating a Custom, Maintainable React-Scripts Package – Helpful Human

Creating a Custom, Maintainable React-Scripts Package:  by @Canfie1d #ReactJS #JavaScript

  • When Facebook released Create React App(CRA), I was excited to be able to harness their knowledge of the build process in my applications.There was an issue, however.While create-react-app was an amazing boilerplate to kick off a project with, it didn’t include everything we needed to include in new React projects.
  • While using this method was considerably faster than setting up a new application from scratch or basic from a boilerplate, it was important to me that the application could still rely on updates from the React team.Powered with information gleaned from that experimentation, we set out to create a way to harness the power of CRA with the added benefit of including other dependencies we required out of the box.
  • This discovery was the key to unlocking our ability to harness CRA.We began reading through how Kitze, the author of custom-react-scripts, enabled the ability to use a custom scripts package and came across an undocumented code snippet in his documentation:create-react-app my-app –scripts-version CRA had an undocumented hook built into the API to override the default react-scripts with your own.
  • While custom-react-scripts is an amazing package for setting up projects with differing requirements, we only needed one specific set up for our team.Poised with new information, we forked CRA and began editing the react-scripts to include the missing pieces.
  • This was a major step in the right direction and is sure to drastically cut down on the time it takes to spin up a new application.Next StepsWhile the few modifications we added to react-scripts are nice, we have plans to expand helpful-react-scripts further to include other dependencies such as a custom linting configuration, react-axe, redux-responsive, a font loader, Webpack code chunking, and other progressive web application considerations such as offline-plugin and a service worker.We are also developing our own version of create-react-app called helpful-cli in order to extend the functionality of CRA into including optional front-end packages such as moment.js and lodash.js as well as backend boilerplate and configurations.Since publishing helpful-react-scripts to NPM, we’ve seen 1,600 downloads in the last month and could see that number rise as we add functionality and it becomes more stable.If you found helpful-react-scripts helpful to you, let us know!

At Helpful Human, we were looking for a new solution to quickly spin up new projects. We wanted to lean on Facebook’s knowledge of React, Webpack, and best practices surrounding the configuration and…
Continue reading “Creating a Custom, Maintainable React-Scripts Package – Helpful Human”