I approach an interesting project about searching, discovery and visualization of materials: The Novel Materials Discovery (NOMAD) Laboratory.
It's my first project related to computational science; in particular, it's about computational materials science. It's an effort to unify codes, data and people in the field in Europe. My role in the project is to develop the web client of the Encyclopedia subsystem.
In order to give a rich and profesional user experinece, the web client will require very fluid behavior and rich functionality, and graphical-interactive views of the materials -3D representations included. This application fits in the trendy concept of SPA (single page application) web application.
It's an interesting challenge for me: this type of apps were unthinkable on the browser few years ago.
A short and clear definition:
Because of the importance of understanding properly this type (SPA) of applications, I edited a brief introductory article:
Particularly regarding reuse and modularity of code, specifically in the use of modules, is where I see that things have changed a lot, especially after the success of node.js and its manager of modules (npm).
I liked this extract from this article on 0fps.net to get started with the issue:
- Hiding implementation details behind interfaces
- Splitting large projects into multiple files
- Reusing functionality from libraries and other code bases
Fortunately there are two module management systems that solve that limitation: AMD and CommonJS. I link two comparative articles:
It seems that the second one (CommonJS) is catching recently. I extract a brief explanation of the article CommonJS: Why and How - 0fps.net:
Regarding tooling for client-side module management there are several tools available. My choice was Webpack. In the next post I gather info about this powerful tool:
As for the remaining important issues for developing a Single Page Application can all be solved through knowledge application instead of external, non-standard and unsuitable software use:
- A suitable architecture for this particular application can be implemented easily applying proper architectural design patterns.
Regarding the browsers support, it seems it's not necessary to support old IE versions due to the fast pace of decrease in the use of those versions. A brief study:
Architecture and Code Organization
A very good introduction to what this section is about (from this great resource: singlepageappbook.com) would be:
... let's look at how a modern web app is structured from three different perspectives:
- Architecture: what (conceptual) parts does our app consist of? How do the different parts communicate with each other? How do they depend on each other?
- Asset packaging: how is our app structured into files and files into logical modules? How are these modules built and loaded into the browser? How can the modules be loaded for unit testing?
- Run-time state: when loaded into the browser, what parts of the app are in memory? How do we perform transitions between states and gain visibility into the current state for troubleshooting?
I write this analysis down on this long article: Notes on SPA Design and Architecture (NOMAD Encyclopedia project) - ikerhurtado.com