Maximizing Debuggability with Redux – LogRocket

Making #Redux apps easier to debug #reactjs #webdev via @LogRocketJS

  • 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, } }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”

Modern static site generation

  • There is this function called Server Side Rendering where you can produce static HTML content directly from a tree of React.js components.
  • At the time of reading this, this site will already be served by GitHub pages and the content you will see once you view the source it’s been generated by Gatsby.js.
  • Here’s my list:

    At the time that I started following them, all of them were in a very early stage and none of them could generate my site’s content the way I wanted and in the same way as my previous one so to not lose paths and certain functionalities.

  • Think of when you are caching the home page of a WordPress powered site and you are serving the cached content to every visitor.
  • Imagine that instead of having memcached caching your HTML in front of your WordPress site, you trigger a hook each time your database changes that will re-generate the frontend using Gatsby.

In this post, I will talk about static site generators. How they have evolved and why I switched from a Ghost powered site to Gatsby.js, a modern static site generator.
Continue reading “Modern static site generation”

Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment

  • , contains dumb React components which depend on containers for data.
  • , contains starting template (if project got cleaned with ).
  • Container care about how things work, while Component care about how things look.
  • You can see the sample app with this script if you’re not cleaning the project yet

    Before start the new project, you can use this script to remove the sample app, this script will remove everything inside and directories, and generate the starting and

    Bundle all the files, it will create the for all the style files, for the client app, and for the server app.

  • If you want to see your project in production environtment

    This Universal ReactJS Starter-kit is packed with plop generator, you can generate component or container template using this script

universal-react-starter – Universal React starter with Redux, React Router, Express, CSS/SASS Module, Mongoose, Webpack.
Continue reading “Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment”

Using Electrode to Improve React Server Side Render Performance By Up To 70%

  • js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance.We use server side rendering for almost all of our applications for two reasons:Improved performance for the customerBetter for SEOIn our tests, however, we found that React’s renderToString() takes quite a while to execute — and since renderToString() is synchronous, the server is blocked while it runs.
  • Every server side render executes renderToString() to build the HTML that the application server will be sending to the browser.To solve this problem, we created two Electrode modules: Above the Fold Render (ATF) and Server Side Render Profiling and Caching (SSR Caching).
  • The average renderToString()call with this configuration took 153.80 ms.Electrode default, though, Electrode comes with renderWithIds:false, which gives us a renderToString() time of 124.80 ms. Not bad — Electrode’s default configuration has already improved render time by 19%!
  • That drops our renderToString() time all the way to 36.56 ms — an astounding 71% improvement from the default Electrode configuration, and a 76% improvement from our original, unoptimized test.
  • That means a 70% improvement won’t mean 90 ms, but 180 ms saved.Special Thanks:To Arunesh Joshi, Dmitry Yesin, and the home page team who have implemented the Electrode modules and are using them on the home page in production.To Caoyang Shi, for helping to gather data and ensuring we’re getting the right numbers!More Information:Check out Joel Chen’s post on ReactJS SSR Profiling and Caching or Arpan Nanavati’s post on Building React.js at Enterprise Scale.Check out my post about the release of Electrode, the customer-facing platform that powers Walmart.com.The Electrode website: www.electrode.io

We built Electrode, the react/node.js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most…
Continue reading “Using Electrode to Improve React Server Side Render Performance By Up To 70%”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow @calebmer  #Reactjs #Javascript #Webdev

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”

Become a Professional React Developer

Discover the #Javascript library used by the world's most successful companies  #reactjs

  • Learn directly from Udacity’s Head of Recruiting!
  • React is completely transforming Front-End Development.
  • Master this powerful UI library from Facebook with Udacity and the experts from React Training.
  • To succeed in this program, you need to have experience with building front-end web applications with:

    You should have familiarity with the following:

React is completely transforming Front-End Development. Master this powerful UI library from Facebook with Udacity and the experts from React Training.
Continue reading “Become a Professional React Developer”

How to use TypeScript with Node

  • For example:

    //Typescript
    class Test {
    //field
    name:string;
    //constructor
    constructor(name:string) {
    this.name = name
    }
    //function
    display_name():void {
    console.log(“name is : “+this.name)
    }
    }
    //javascript
    var Test = (function () {
    //constructor
    function Test(name) {
    this.name = name;
    }
    //function
    Test.prototype.display_name = function () {
    console.log(“name is : ” + this.name);
    };
    return Test;
    }());

    In the snippet above, notice that it is easier to read the TypeScript version of the code than the JavaScript Version.

  • Getting Started
    To install TypeScript globally so you can call it when needed, run:
    npm install -g typescript

    For verification of the installed TypeScript, use the tsc –v command:
    tsc –v
    //Version 2.1.6

    Next, install gulp for the build process.

  • To do that, we run:
    npm install gulp gulp-typescript typescript –save

    Doing just this setup done might be enough, but you would have to go back to the terminal to run the tsc command every time a change occurs.

  • Now, put the following contents into the gulpfile.js:
    const gulp = require(‘gulp’);
    const ts = require(‘gulp-typescript’);

    // pull in the project Typescript config
    const tsProject = //task to be run when the watcher detects changes
    gulp.task(‘scripts’, () = {
    const tsResult = tsProject.src()
    .

  • const server = http.createServer(App);
    server.listen(port);
    server.on(‘listening’, onListening);

    //function to note that Express is listening
    function onListening(): void {
    console.log(`Listening on port `+port);
    }

    This has imported the HTTP module from node.

Learn how you can create an app with TypeScript and Node.js, using Gulp to automate the building process and Nodemon to restart the server.
Continue reading “How to use TypeScript with Node”