Difference between revisions of "Team:USTC-Software/Improve"
| Line 92: | Line 92: | ||
<div class="subtitle">Structure</div> | <div class="subtitle">Structure</div> | ||
<p>To improve the user experience, we build Biohub 2.0 as a single page application (or short for SPA), using the advanced MVVM framework Vue.js. Vue.js relies on webpack (not forcibly, but recommended) for pre-compiling, which encapsulating everything into a single file. This is inconvinient for a website with a plugin system, so we analyzed the code generated by webpack and developed an approach to load components dynamically. It is the theoretical basis of Biohub 2.0's plugin system. You can refer to</p> | <p>To improve the user experience, we build Biohub 2.0 as a single page application (or short for SPA), using the advanced MVVM framework Vue.js. Vue.js relies on webpack (not forcibly, but recommended) for pre-compiling, which encapsulating everything into a single file. This is inconvinient for a website with a plugin system, so we analyzed the code generated by webpack and developed an approach to load components dynamically. It is the theoretical basis of Biohub 2.0's plugin system. You can refer to</p> | ||
| − | <a href="https://github.com/USTC-Software2017-frontend/Biohub-frontend/blob/master/src/components/plugins/Plugins.vue"> | + | <a style="display: inline-block;" href="https://github.com/USTC-Software2017-frontend/Biohub-frontend/blob/master/src/components/plugins/Plugins.vue"> |
Main.vue | Main.vue | ||
</a> | </a> | ||
Revision as of 08:17, 1 November 2017
Improve
Frontend
We introduced a new user interface. The beautiful new interface is based on the Bootstrap framework, however, which is highly customized. We disabled the built-in module `Glyphicons` and replace it by `font-awesome`. We coordinated our color schemes and our logo to make a nicer look. Short animations during transitions were added to provide better experience.
To improve the user experience, we build Biohub 2.0 as a single page application (or short for SPA), using the advanced MVVM framework Vue.js. Vue.js relies on webpack (not forcibly, but recommended) for pre-compiling, which encapsulating everything into a single file. This is inconvinient for a website with a plugin system, so we analyzed the code generated by webpack and developed an approach to load components dynamically. It is the theoretical basis of Biohub 2.0's plugin system. You can refer to
Main.vueto see such mechanism.
Backend
We finally have implemented the plugin system this year, which is a fundamental feature of our project. We monkey-patched Django to make its core dynamically changeable, so user can activate or deactivate plugins without restarting the server.
We used websocket to establish connections between server and users. Notification will be sent to users whenever being created.
