A new version of mViewer has been released. Please check it out here. Here we would list down the tech stack been used to develop new mViewer. Features added to new mViewer can be found here

mviewer

UI Tech Stack

1. ReactJS
One of the significant difference to notice is the new user interface. The previous version was built using YUI. It has been revamped using ReactJS. React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. ReactJS is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Listing down few benefits of ReactJS which made it the choice for mViewer UI development

  • Virtual/lightweight DOM that enhances Performance
    React doesn’t use the browser DOM, but allows one to manipulate DOM version stored in the memory. Whenever there is any data change the complete page rendering is not needed only the changes are applied via the Diff algorithm (used by React.js). The mViewer app will be talking to MongoDB which can be of huge size. With the help of a virtual React DOM we can randomly updates parts that have been updated. Thus, conquering the performance issues.
  • Easy in Learning
    The straightforward API of React framework makes it very easy for one to get started. You can kick start development of this framework with its simplified programming approach. There is no need to make painstaking efforts in learning complicated concepts.
  • Option for pure JavaScript template creation which makes creation of desired interface relatively easy
    You can easily use the nested elements in React. It can be accomplished by including a reference to the child class within the render method of the parent class. The method is much simpler, cleaner and easier than working in the same with Angular framework.
  • Reusable Components React is built around development using components. Common react design elements can be broken down to individual components. React Buttons, fields, forms etc, can be saved and reused for a later time when the application developer intends to create another mobile or web UI project.

2. Webpack

Webpack in it’s simplest form is a module bundler. This means that webpack takes modules with dependencies and generates static assets representing those modules. Webpack understands that CSS and images are also dependencies and treats them as such. To that end, WebPack is not just another module bundler — but offers a plethora of features we use as developers.

Goals Of Webpack
1. Split the dependency tree into chunks loaded on demand
2. Keep initial loading time low
3. Every static asset should be able to be a module
4. Ability to integrate 3rd-party libraries as modules
5. Ability to customize nearly every part of the module bundler
6. Suited for big projects

Middle Ware Tech Stack
  1. Java – All RestAPI’s are build in Java 1.7.
  2. MongoDB Java Driver:- The MongoDB Java driver version used is 3.2.2 and it works for all MongoDB versions >2.6.
Deploying mviewer

mViewer is prepackaged with lightweight servlet container winstone. It can be deployed in two ways.

  1. We can just download the build from github and deploy on winstone server. Winstone is a servlet container that was written out of a desire to provide servlet             functionality without the bloat that full J2EE compliance introduces. It is not intended to be a completely fully functional J2EE style servlet container.
  2. Deploying on other Servlet-Containers. You can generate a distributed war file which can be deployed on to any servlet containers.