Download as PDF, PPTX
Uploaded byTech Triveni
UI Dev in Big data world using open source
The document discusses the importance of UI in the big data world, outlining how to effectively target big data problems and select appropriate frameworks and tools. It compares custom frameworks and open-source tools, detailing their benefits and ideal use scenarios. Also included are Github statistics for popular frameworks and a summary of open-source tools like Kibana and Apache Superset for data visualization.
More Related Content
Similar to UI Dev in Big data world using open source
UI Dev in Big data world using open source
- 1. 1 UI Dev inBig Data World using ‘Open Source' Paramjit Jolly
- 2. 2 About Me 2000 20032005 2008 2019 Solutions Inc MULTMEDIA / E-LEARNING PHARMA FITNESS BIG DATA TELE-COM NETWORK SECURITY IOT
- 3. 3 From the Bottomof the Oceans… to the Depths of Space & Cyberspace About -
- 4. 4 Agenda • Why UIis important in Big data world • How to Target Big data problems • Framework/Tool – Selection Criteria • Evolution of big data UI at Guavus • Write/Use “Custom framework” or “Open Source Tool” ? • Demo – custom framework & open source tool • Why to contribute to open source
- 5. 5 Why UI isimportant in Big Data World
- 6. 6 Why UI isimportant in Big Data
- 7. 7 Big Data –Analytics - UI BIG DATA ANALYTICS DECISIONS
- 8. 8 How to TargetBig data problems
- 9. 9 • Understand theUse-cases & get the full picture clarity • Define the Persona, UX, User Journeys, Form factor etc
- 10. 10 • Identify apparea’s which deals with real Big data • Depends on Big data visual needs – choose a library like…
- 11. 11 • Check thePerformance of big data library • Caching support needed in Big data areas
- 12. 12 • Identify Longrunning queries, convert to reports • Offline data factory – ease during development Development
- 13. 13 • Identify need-Real time data v/s Auto refresh • Granularity based time – Gran based min, max
- 14. 14 • Timezone &DST handlings • i18N support Timezone DST
- 15. 15 • Theme support •Customer Problems is changing, hence keep your design open for extension
- 16. 16 How to choosea right framework/Tool “Selection Criteria”
- 17. 17 • Lay-outing support •Basic charting support
- 18. 18 • Graph visualizationsupport • Map visualization support
- 19. 19 • Time range– custom & quick links • Timezone support Timezone DST
- 20. 20 • Filters Support(global, local)
- 21.
- 22. 22 • Connecting Multipledata sources • Cancel Query Support
- 23. 23 • Query Buildersupport - Basic - Advance
- 24. 24 • Export Support -Snapshot - CSV - Pdf • Dashboard sharing
- 25. 25 • Real timedata support • Security - IAM - Identity and access management
- 26. 26 • Testing &Monitoring • Documentation
- 27. 27 Selection Criteria -sheet › Basic criteria for open source ❑ License Type ❑ List of Companies using ❑ #Stars to github ❑ Bug & Feature commit rate ❑ Future roadmap
- 28. 28 Evolution of BigData UI at Guavus
- 29. 29 Evolution of BigData UI at Guavus
- 30. 30 Write custom frameworkor use open source tools to develop
- 31. 31 When to write/use- Custom Framework • Your vision is not matching with any open source vision • Too many customization needed every-time so need a thin framework • Long term vision to create differentiator in market • Could be potential candidate for new open source - framework • Benefits: • Better control • future proof • value in market
- 32. 32 When to use– Open source tool • Most of needed features available in open-source tool • Has extendable architecture for your vision • Connect to multiple data sources • Easy to theme & customize • Tool is actively enhanced & fixed • Benefits: • Time to market
- 33. 33 How to choose- “Custom framework”
- 34. 34 Common question fromdevelopers • Which is better for my project? • Which offers the best performance? • Which is good for small size or large size applications? • Which of the three is the most reliable one? • Which offer me flexibility ? • Which factors to considering while choosing framework ?
- 35. 35 Vue.js Initial Release Oct,2010 May, 2013 Feb, 2014 Current Version 8 16.9.0 2.6.10 Easy to learn High (Learn TS) Medium Easy Backed by Google Facebook Ex-Googler Used by companies Google, Wix, PayPal, HBO, Sony, GM Facebook, Uber, AirBnb, Netflix, Instagram, Twitter Xiaomi, Alibaba, GitLab, Laracasts File size - Production 167 KB 109 KB 30 KB File size - Development 1.2 MB 774 KB 279 KB Data binding Bi-directional Uni-directional Bi-directional
- 36. 36 Vue.js Npm weekly downloads268,528 3,509,127 641,381 Model MVC Virtual DOM Virtual DOM Startup time Longer Quick Quick Complete web apps Can be used on standalone basis Need to be integrated with many tools Require 3rd party tools When to use Production, Enterprise applications Production, custom UI apps Startups, production Github stars 53.2K 138K 151K Summary Angular is a complete framework with all the tools a modern JavaScript developer needs. React is a library not a framework, you need to choose you own tools needed to create full app, which give flexibility but other hand difficult to choose. Vue library is just a mix of Angular and React
- 37. 37 Interest over last5 years
- 38. 38 Demo – NetworkLoad Advisor • Problem: Telecom customers were facing • Call Drops • Bad browsing experience • Demo Link
- 39. 39 How to choose-“Open source Tools”
- 40. 40 Choose open sourceTools like Kibana , Superset, … • Define Target Persona – Business Analyst, PM • Your vision for Tool matches with any of open source • Pros: • Quick time to market • Easy of use • consistent look n feel • Cons: • New feature addition takes longer • Architecture – steep learning curve • Upgrade problems if you customize & its not really extendable • Lot of tools in market from open source to paid • Kibana, Superset , Graphana, kibi, Google Data platform, powerBI, Tablaue, Amazon quick Inisghts etc.
- 41.
- 42. 42 • Open sourcetool to visualize, explore data, manage& monitor the entire Elastic stack (ELK) • ELK – Elastic Logstash, Kibana • Aggregation, Filter, Search etc. • Support variety of visualizations • Charts • Timeseries • Maps
- 43. 43 •Pros • Plugin modelis very nice • Very good for Elastic & Search use cases which needs ELK • Good variety of graphs, Visuals & timeseries • Create Quick dashboards •Cons • Not able to connect to multiple data sources natively • Heavily dependent on Elastic • AngularJS based code, now migrating to react
- 44.
- 45. 45 • Enterprise-ready BusinessIntelligence web application • Drag drop based exploring and visualizing data • Rich set of data visualizations - 50+ • Charts • Geospatial visualisation • Time series
- 46. 46 • Enterprise levelRBAC – Role based Access Control • Integration with major authentication providers (database, OpenID, LDAP, OAuth) • Cloud native
- 47. 47 • Support multipledatastores • SQL Lab
- 48. 48 • Part ofHDP 3.0 • Growing community & penetration
- 49. 49 Demo - IOTUse case • Problem: Find most Anomalous IOT devices in network & detailed activities of devices • Devices with most anomalies • Demo Link
- 50. 50 Why to Use& Contribute to open source
- 51. 51 • Time tomarket • Improve the Code • Reduce Costs
- 52. 52 • Gain CompetitiveAdvantage • To Make the Software More Usable • Excel Your Career
- 53. 53 • Support OpenSource Values • Promote Industry Standards • Give Back
- 54. 54 Design UI forFuture
- 55. 55 • Plugin architecturefor bringing new items in system • Configurable & Low footprint • Responsive UI – Laptop, tablet, mobile etc. • Multi-modal UI i.e. Echo-spot • Spatial interfaces (VR, AR, MR) • Virtual reality, Augment reality, Mixed reality • Wearables like iWatch
- 56.