React: 1 - Not Just (Yet) Another JavaScript Framework
Browser based JavaScript code is all about manipulating the browser’s DOM.
Up until a few years ago, at DNN Corp we had primarily been using jQuery to do that manipulation. Don’t get me wrong jQuery is an awesome framework, but jQuery directly manipulates the DOM - there is no concept of working with models/objects in jQuery – i.e. separating your presentation aspects from your other logic.
Then during a Microsoft MVP summit I was at a presentation where Steve Sanderson introduced the new Knockout JavaScript Framework. Knockout was one of the first frameworks (at least that I was aware of) that supported the idea of an MVC or MVVM style of JavaScript development with two way data-binding, between the View (html) and ViewModel (JavaScript object).
Steve gave a great presentation and we decided that knockout was going to be part of our client-side development and it has allowed us to move forward with much more complex (and responsive) UIs.
We never really jumped on the Angular bandwagon but there are some aspects of Knockout that challenge us – especially when the Models and Views get complex. In general, one of the biggest complaints about two-way data-binding frameworks is that when this happens performance can become an issue.
Recently I became aware of React a relative new JavaScript Framework from Facebook. React’s biggest claim to fame is that it is not a two-way data-binding framework so in my role as Chief Architect for DNN Corp I felt I had to check it out.
After watching a couple of videos and reading some of the React documentation, my initial reaction (pun intended) is that this framework stands out – its “Not just another UI framework” – this one is important, especially considering that some of the biggest names in the web space are beginning to jump on the React bandwagon in addition to its creators Facebook and Instagram.
React takes a totally different approach to “Single Page Application” development – Facebook say that many people think of React as the “View” in a Model-View-Controller pattern, but in reality Facebook describe React as a library designed to build composable Components.
React doesn’t use two-way model binding. Instead it uses a single one way model-binding flow. When changes need to be made the whole DOM is refreshed. Wait – you say – doesn’t that mean it will be really slow!! Well, to be more accurate it regenerates the Virtual DOM that React uses under the covers and updates the real DOM using a “Diffing Engine”. This simplifies the development while maintaining good performance
Over the next few weeks I intend to dive deeper into React – feel free to come along for the ride.
For more about React check out these links: