A session in the DevNet Zone at Cisco Live, Berlin. Network Topology Visualization is an important part of many SDN applications and other domains. Easy customization and building a new component base on NeXt to adapt to different requirements is critical. This session will illustrate how to customize topology components and how to build other visualization components with the latest commercial version.

1. We’re ready. Are you?
February 15 - 19, 2016 • Berlin, Germany

2. New NeXt For Developers
Susie Wee, Wael Kamal, Abu, Ming Zhu, Edwin Zhang

3. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 3
Problems visualize on diffeerent domains
Networking IOT/Indoor Navigation Big Data

4. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 4
Complexity

5. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 5
Variety

6. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 6
Interactivity

7. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Current Solutions
7

8. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 8

9. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 9
D3

10. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
What is the difference from the beginning status
10

11. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
NeXt solution
11

12. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 12
NeXt means, User eXperience embedded in
Network.
It is a HTML5/JavaScript based toolkit for
visualizing topology and things

13. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Solving the complexity
13

14. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 14
Aggregated node
Expanded node

15. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Providing variety
15

16. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 16

17. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Adding interactivity
17

18. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 18
Select multiple node
Move topology on the screen
Zoom in / zoom out
Zoom by selection
Focus drawing

19. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Demo
19

20. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 20

21. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Lao Zi
Ancient Chinese philosopher
21

22. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
22
Next core engine
NeXt rendering engine
NeXt graphic library
Themes
Common themes
Dependent files

23. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 23
Initialize topology

24. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Fill Models
24

25. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
With several lines of code we can build a
simple ,interactive topology with rich content.
Good user experience
25

26. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 26

27. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
What is the price
27

28. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
It is all open sourced now for free with eclipse
license 1.0
28

29. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Where to get document and code
29
developer.cisco.com/site/next

30. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 30
git clone https://git.opendaylight.org/gerrit/p/next

31. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
What is the future of NeXt
31

32. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 32
At a glance

33. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 33

34. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
NeXt 2.0 Road map
34
2016-03-28 2016-04-31 2016-06-8 2016-07-28
Finish networking model
design
Finish networking tool kit
Leverage the topology
features from next 1.0
Finish IoT model design
Finish IoT tool kit
Finish Big data service
model design
Finish big data service
toolkit
Finish testing
Finish user guide
Finish documentation
Finish open source
check point

35. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID
Video
35

36. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 36

37. Thank you
© 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 37
Feel free to contact me at
mizhu2@cisco.com

38. We’re ready. Are you?

39. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID 39
NeXt Lang EX OOP Map ListNX-Base
SVG lib
History
routing
Hash routing UtilsNX-web
NX-Model
Topology
Model
Map Model Flow Model
NX-View
Topology
toolkit
Glance toolkit DevIoT toolkit
Analystic
toolkit
High level architecture diagram of NeXt