![image1.png](/legacyfs/online/fusion/92988_image1.png)
Nowadays, IT/OT professionals (such as network engineer, system admin etc.) spend lots of time on network topology-like User Interface (UI) for design, maintenance and operation tasks. As the network system grows more and more complicated, this network topology-like UI becomes more difficult to use. In this disclosure, we build NeXt UI toolkit to solve this problem and make the network topology-like UI more user friendly, hence improve user’s productivity. NeXt UI toolkit (Network embedded Experience) is an HTML5/JavaScript based toolkit for network web application. Provide high performance and high quality framework and network centric topology component. By embedding topology component in Network Web Application, developer can visualize and operate network. And it is an Open Source Project under OpenDayLight community. More information can get from developer protocol.
![image2.png](/legacyfs/online/fusion/92989_image2.png)
There are couple design principle and advantage of NeXt:
- Experience oriented development
- Visual and interaction designs focus on building intuitive network experience
- Easy to build network web applications (Effort saving)
- Leverage other language concepts / introduce concept from other languages/framework
- Provide topology component with rich APIs
- Open sourced develop mode
![image3.png](/legacyfs/online/fusion/92996_image3.png)
Main features of NeXt topology component
- Topology basic graph visualization and interaction
- Multiple layout present (Force auto layout / Enterprise network layout/ Hierarchical Layout)
- Large network scaling support (aggregation/progressive rendering)
- Path / traffic / tunnel / group visualization
- Build-in Map overlay (US map)
- Build-in interaction behaviors and extend interface (drag/zoom/hover/click/select/aggregate)
- Build-in 20+ icon and 5 themes
- Build-in tooltip manager / layout manager / node & link extendibility
NeXt UI Toolkit Topology Architecture
![image4.png](/legacyfs/online/fusion/92997_image4.png)
Hello world of NeXt
Sample code : http://jsfiddle.net/nextsupport/4Lr3kuos/
![Screen Shot 2016-02-12 at 6.00.44 PM.png](/legacyfs/online/fusion/92998_Screen Shot 2016-02-12 at 6.00.44 PM.png)