Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Robust Front-end Development with React and Redux

In this article, Gigi Sayfan introduces you to React, Redux and the answer to the paradox of choice and JavaScript fatigue.


advertisement

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 <project>
    cd <project>
    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 src\about\index.js
       create src\app.js
       create src\home\index.js
       create src\index.js
       create src\layout\index.js
       create src\layout\index.scss
       create src\nav\index.js
       create src\routes.js
       create tests\about_test.js
       create tests\home_test.js
       create tests\layout_test.js
       create tests\nav_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.



   
Gigi Sayfan is the chief platform architect of VRVIU, a start-up developing cutting-edge hardware + software technology in the virtual reality space. Gigi has been developing software professionally for 21 years in domains as diverse as instant messaging, morphing, chip fabrication process control, embedded multi-media application for game consoles, brain-inspired machine learning, custom browser development, web services for 3D distributed game platform, IoT/sensors and most recently virtual reality. He has written production code every day in many programming languages such as C, C++, C#, Python, Java, Delphi, Javascript and even Cobol and PowerBuilder for operating systems such as Windows (3.11 through 7), Linux, Mac OSX, Lynx (embedded) and Sony Playstation. His technical expertise includes databases, low-level networking, distributed systems, unorthodox user interfaces and general software development life cycle.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date