Difference between revisions of "Team:USTC-Software/Improve"

Line 1,032: Line 1,032:
 
}
 
}
 
</style>
 
</style>
−
<body><div id="team-content>
+
<body><div id="team-content">
−
<article class="markdown-body"><h2 id="improve"><a name="user-content-improve" href="#improve" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Improve</h2>
+
<article class="markdown-body"><div class='item one'><h2 id="improve"><a name="user-content-improve" href="#improve" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Improve</h2>
 
<p>Biohub2.0 is the upgraded version of Biohub, which is the project of team USTC-Software-2016. A lot of functions have been updated and many new features added both at frontend and backend. </p>
 
<p>Biohub2.0 is the upgraded version of Biohub, which is the project of team USTC-Software-2016. A lot of functions have been updated and many new features added both at frontend and backend. </p>
−
<h3 id="frontend"><a name="user-content-frontend" href="#frontend" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Frontend</h3>
+
<h3 id="frontend"><a name="user-content-frontend" href="#frontend" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></div>
 +
</a>Frontend</h3>
 
<ul>
 
<ul>
 
<li>
 
<li>
Line 1,045: Line 1,046:
 
</ul>
 
</ul>
 
<h3 id="backend"><a name="user-content-backend" href="#backend" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Backend</h3>
 
<h3 id="backend"><a name="user-content-backend" href="#backend" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Backend</h3>
−
</article></div>
+
</article>
 
<script>
 
<script>
 
     var scroll = new SmoothScroll('a[href*="#"]');
 
     var scroll = new SmoothScroll('a[href*="#"]');

Revision as of 08:29, 27 October 2017

Team

Improve

Biohub2.0 is the upgraded version of Biohub, which is the project of team USTC-Software-2016. A lot of functions have been updated and many new features added both at frontend and backend.

Frontend

  • User Interface: 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.

  • Structure: 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.vue to see such mechanism.

Backend