devxlogo

Robust Front-end Development with React and Redux

Robust Front-end Development with React and Redux

Modern front-end development can be quite confusing. I started dabbling in Web programming about 20 years ago. We already had HTML, CSS and JavaScript, but that’s about it. There were no frameworks to speak of. The browsers of the day were Netscape Navigator and IE 4. Yes, IE 4! It was all about custom DOM manipulation through completely different programming models. DHTML and ActiveX were a thing.

Fast forward to the present. We have standards (unless you still need to support IE6), we have frameworks and we have guidelines. Now, we suffer from the paradox of choice. In addition, the whole JavaScript eco-system is changing so fast it’s really difficult to keep up with everything. The next big thing changes so fast that a lot of people are frustrated when they invest a lot of time and effort learning and building stuff that becomes obsolete seemingly overnight. In particular, React gave rise to the now infamous JavaScript fatigue. In this article, I’ll introduce you to React, Redux and the answer to the paradox of choice and JavaScript fatigue. Let’s get started.

React in a Few Words

React is the right way to write Web (and now also native) applications, in my humble opinion. It is a view only framework focused on nested components with a very clean programming model. I wrote a whole DevX article on React. Check it out for more details: Component-Based JavaScript Development with React.js.

Everybody loves React, but it is a view-only library. What about the rest of the application? Enter Redux…

Redux in a Few Words

Redux emerged as the winner from the a harsh Darwinian battle of many state management and complete life-cycle for React applications. Facebook originally promoted the Flux architecture and many libraries and frameworks implement various flavors of it. But, then Redux took everybody else by storm.

Redux is based on 3 principles:

  • Single source of truth
  • State is Read-only
  • Change modifications are made by pure functions only

    Here is a shocker — Redux is finished! There are no more breaking changes planned. It has accomplished all of its design goals and the author doesn’t feel any need to muck around with. Talk about a refreshing change in the JavaScript scene.

    Get up to Speed Quickly with Mozilla Neo

    OK, React and Redux are great, but setting up a new project sounds very daunting with all the choices you have to make from some many options. Or is it? The mozilla-neo project is a an npm package that creates a complete project for you based on current best-in-class libraries and tools.

    First install it:

    ```npm install -g mozilla-neo```

    Then create a working directory and initialize a Neo project:

    ```mkdir cd neo init```

    It will ask you a few questions, create a whole directory structure for you and install a bunch of packages:

    ```02:44:29 [G] neo-app> neo init? What is the title of your app? Neo App? What is the name of your package (i.e. npm package name)? neo-app? Who is the author of this app? Gigi? Description A basic Mozilla Neo app? Choose a port for development 4000   create package.json   create srcaboutindex.js   create srcapp.js   create srchomeindex.js   create srcindex.js   create srclayoutindex.js   create srclayoutindex.scss   create src
    avindex.js   create src
    outes.js   create testsabout_test.js   create testshome_test.js   create testslayout_test.js   create tests
    av_test.js   create .gitignore   create .travis.yml   create LICENSE   create README.md

    I’m all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

    If you follow the instructions and type “npm start” the development server will start running. You can browse to http://localhost:4000 and view the starter Web application in action: http://i.imgur.com/hWbPiwU.png

    You get a lot of functionality right out of the box:

    • React, Redux, React Router
    • Webpack
    • ESLint, Babel, ES2015 + modules, Stage 0 preset
    • Tests and coverage with Karma, Mocha, Chai, and Enzyme
    • Immutable
    • Bootstrap 4 and Sass
    • Travis CI

    There is really no general-purpose capability missing here. You can install additional specialized packages of course.

    Conclusion

    The JavaScript ecosystem provides a very complete and full-featured develop environment for front-end applications. But, the fragmentation and dizzying pace of change can throw off anybody. Mozilla Neo makes life easy by providing a coherent set of choices that covers all your needs. Using Mozilla Neo lets you get to work on your application right away.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist