Embed Size (px)
Citation preview
Dev Brown Bag
How to Use Shared WidgetsBrendan Todaro
Kyle Nicola
12/14/2016
• React
• Modular Javascript patterns and tooling
• Setting up a new Javascript module
• Code organization
• Versioning plan
Not covered
Motivation
Widgets Library
How to Use a Widget
Shared Utilities
Contributing
Support
Future Directions
Slide 4
Slide 11
Slide 17
Slide 26
Slide 36
Slide 43
Slide 47
Agenda
Motivation
1. Shared design, shared environment, no shared code
2. Generational shift to modular Javascript
3. Urgency to increase developer productivity
4. Industry standard
5. Tableau has unique constraints
Goal: Unify design and decrease time spent implementing UI
Motivation
Same design, same environment, no shared code
Generational shift to modular Javascript
VizClientVizPortal
Client
Server
Manager UI
Module
Module
Module
Widgets
Module
Maestro
“You could build widgets independently for every client we have... Or create reusable widgets and share them.”
Scott Sherman, Dev Blog, April 2016
Industry standard
• Viz Client event system
• Hybrid React apps
• Unification
Tableau has unique constraints
Widgets Library
1. Currently available widgets
2. Showcase
3. What’s included in a widget
Widgets Library
• Button
• Text field
• Checkbox
• Radio button
• Toggle
• Dropdown menu
• Flyout list menu
• Dialog
Currently available widgets
• Unification styles
• UX-approved behavior
• Keyboard accessibility
• Screen reader accessibility
• SVG icons
• Testing hooks
What’s included in a widget
How to Use a Widget
1. API
2. Controlled Components
3. Customization
4. Test IDs
5. Client-specific compatibility
6. Application configuration
How to Use a Widget
API
API
API
Controlled components
[Copy content]
Customization
[Copy content]
Test IDs
[Copy content]
• VizClient• Z-index for stacking
• Vizportal/Angular• Wrap in directive
Client-specific compatibility
Application* configuration
Shared Utilities
1. Stacking
2. Overlay
3. Interactive Styling
4. TabStyles and Dynamic Theming
5. CSS Injection
6. Other
Shared Utilities
Stacking
[Copy content]
Overlay
[Copy content]
Interactive Styling
[Copy content]
TabStyles and Dynamic Theming
[Copy content]
Pointer Events Adapter
[Copy content]
CSS Injection
[Copy content]
• React Helpers
• Polyfills
Other Utils
Contributing
1. What belongs in Shared Widgets
2. Contribution process
3. Development flow
4. Component composition
5. Recent contributors
Contributing
• Could it be used in multiple clients?
• Able to follow most of our current patterns?
• Is it big enough to warrant its own module?
• Require 3rd party libraries?
What belongs in Shared Widgets
1. Check if the widget is planned
2. Contact Kevin Mason, our PM
3. Work with Visual Design for approval
Contribution process
1. Develop• modules/web/shared-widgets
• VSCode recommended
• > npm run dev
• > npm run test-dev
2. Update C# type definitions• workgroup/vqlweb/scriptsharp/tableau-libraries/SharedWidgets
• Build and test in Viz Client
3. Update showcase• workgroup/webclients/shared-widgets-showcase
• > npm run update-sw & npm run all & npm run copy
Development flow
Component composition
DynamicThemeComponent
FlyoutListMenuWidget
ListMenuWidgetOverlay
StackingComponentWrapperMenuItemWidget
Block (DomWidget)
• Rachel Boy
• Roy Xia
• Vignesh Rangaishenvi
Recent contributors
Support
1. Handshake agreement
2. Subscribe to announcements
3. Feedback
Support
Handshake agreement
[Copy content]
• Publishing announcements to this wiki page is the way we’ll communicate upcoming changes
Subscribe to announcements
• Hipchat: `Shared Widgets Community`
• Request a widget
Feedback
Future Directions
• Full replacement of current components
• Published versions to Artifactory
• Improve touch experience
• Next generation of Unification design
• Make it public
Future Directions
• Matt York
• Michael Becke
• Jeff Raymakers
• Jonathan DeKlotz
• Daniel Leventhal
• Cody Meyer
• Jarrod Lombardo
• Chris Wyman
• Kyle Gupton
Thank You
