Getting Started
(Part 2 / 5) Data as a Feature webinar series
How to set up your data as a feature project
2
3
Hello from the project team!
3
Shane Swiderek
Product Marketing Manager, TIBCO
San Francisco, CA
Chad Lumley
Senior UI Developer, projekt202
Seattle, WA
Rachael Ross
Solutions Architect, projekt202
Seattle, WA
Crystal Phiripes
Program Manager, projekt202
Dallas area, TX
Sherman Wood
Director Solution Consulting WW, TIBCO
San Francisco, CA
Xavier Harrell
Sr. Experience Designer, projekt202
Dallas area, TX
4
Agenda
4
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data
5
Build a complete demo app to show the
best practices of user experience and
web application design, development
process and implementation; leveraging
Jaspersoft's "embedded BI" data
visualizations, reports and self service.
Bikeshare Project Goal
© Copyright 2000-2019 TIBCO Software Inc.
© Copyright 2000-2019 TIBCO Software Inc.
Embedded BI Reporting
Inform the massesBI that blends in
“Embedded” is not “BI” (business intelligence)
New World
Answers
in context
Intuitive
visualizations
embedded analytics
Old World
your app
analytics
Actionable
Information
© Copyright 2000-2019 TIBCO Software Inc.
8
Apps do it differently…
© Copyright 2000-2019 TIBCO Software Inc.
Data
Product
Design
Data as a feature,
UX Driven Analytics
Web Developers don’t
think about “BI”
Your audience are consumers,
not data analysts!
Reports: Interactive and
distributed
Self Service: with
guard rails
Visualizations and
Dashboards
Deliver
© Copyright 2000-2019 TIBCO Software Inc.
Data for UX: APIs
10
Current Web App Architectures
• An integrated, seamless result, consistent with design
• A productive development process
• A tight fit into the application architecture
• Flexible security/personalization
• Performance and scalability on demand for a wide
variety of use cases and workloads
Excellent data visualization for apps
provides…
© Copyright 2000-2019 TIBCO Software Inc.
• UX-driven design workflow
• Use visual and JavaScript frameworks
• https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
• Build data microservices manually
• not web developer skills? => a major headache
• Reporting is data dumps or a custom framework
• Self service is not implemented or limited
• Security rules implemented manually in UI, data
access
Current web development processes
© Copyright 2000-2019 TIBCO Software Inc.
• Service and tools to build and run the visualizations and
data access
• Simple, powerful APIs to embed
• Security rules leveraging single sign on, multi-tenancy
• Out of the box self service and reporting
• Scalable configurations
⮚ Faster, cheaper, easier to maintain and evolve…
Embedded development with Jaspersoft
© Copyright 2000-2019 TIBCO Software Inc.
14
Bikeshare project timeline
Assemble
project team
Determine use
case
Create
application
style guide
Research user
personas
Design
application UX
Choose tech
stack & set up
app foundation
“Wrestle” data
into shape
Develop UI
layout
Develop
reports &
visualizations
Embed reports &
visualizations
into app UI
Testing & bug
fixes
Implement
self-service BI
into app
Define project
goals
Project start Month 1 Month 2 Month 3 Month 4
Implement
self-service BI
into app
Ongoing iteration
© Copyright 2000-2019 TIBCO Software Inc.
Implementing Jaspersoft
Deploy & manage
your platform
Server
Cloud or on-premises
Open web development platform
Clustering, built-in multi-tenancy
Connect to
your data
Data Tier
Relational, Big Data, NoSQL
ETL, data virtualization, direct
Metadata layer, in-memory
engine
Inside any app
or process
Delivery
Javascript API
Extensive REST APIs
Mobile apps & SDKs
Your
apps
Output
Create beautiful
reports & visualizations
Pixel Perfect and
complex designs via IDE
Self-Service via browser
© Copyright 2000-2019 TIBCO Software Inc.
16
● Agile process: 2 week sprints, standups, JIRA, Slack
● Team makeup
● Chose a scenario: Bikeshare "franchise management"
○ Public bikeshare systems
● Defined personas
● UX design: look and feel, workflows and visualizations to support personas
○ Invision, Zepplin
● Detailed design
○ Data dictionary
○ Workflow and UI details: defining meaning
Project Process
© Copyright 2000-2019 TIBCO Software Inc.
17
● Development environment and tools
● Architecture
● Requirements for different roles
● Visual framework: CSS Grid, React
● Jaspersoft integration into UI: visualize.js, REST, iFrame
● App to Jaspersoft SSO
Project Process - Infrastructure
© Copyright 2000-2019 TIBCO Software Inc.
Jaspersoft as a service to applications
Repository
Database
Services
Web applications,
Load balancer
Browser user
Web services client
Repository
database
Data sources
Email Services
External Auth
e.g. CAS, LDAP,
JAAS
© Copyright 2000-2019 TIBCO Software Inc.
19
Architecture
Load balancer or Proxy
Bikeshare DBRepository DB
JasperReports
Server
Node.js API Nginx. Static site
or Node.js
© Copyright 2000-2019 TIBCO Software Inc.
TIBCO Jaspersoft Product Family
Jaspersoft Studio
Desktop report designer for
creating pixel-perfect reports
JasperReports Library
World’s most popular
Java reporting library
JasperReports Server
Reports, visualizations, APIs
Self-serviceDistribute Secure & manage
Data visualization and
reporting microservice
JasperReports IO
Data virtualization: blending
multiple data sources
Jaspersoft ADS
Jaspersoft ETL
Data integration for improved
reporting & analysis
TIBCO Cloud Integration (Connect)
Low Code cloud APIs,
Data Replication
© Copyright 2000-2019 TIBCO Software Inc.
21
● Data needed to support workflows and visualizations
● Web forms and visualizations (map, controls, dialogs)
● Jaspersoft visualizations and data for UI
● Jaspersoft data access and metadata (domain) to support self service
● CI/CD process: Github -> AWS deployment
Project process - Artifacts
© Copyright 2000-2019 TIBCO Software Inc.
22
Agenda
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
23
24
Defining the Brand
© Copyright 2000-2019 TIBCO Software Inc.
25
Defining the Brand
© Copyright 2000-2019 TIBCO Software Inc.
26
● User Personas
○ Using information collected
from user observations and
interviews patterns and themes
can be identified
○ Information is then grouped
and analyzed to create
personas
Revealing Reality
© Copyright 2000-2019 TIBCO Software Inc.
27
● View all Regions / Franchises
● Drill down into regions to view
bike status
● Using available metrics and
visual indicators, should be able
to identify problem areas
● Take action to resolve problem
areas
User Personas: Manager
© Copyright 2000-2019 TIBCO Software Inc.
28
• Transport Bikes to Stations
• Repair bikes at stations
• Uses app to follow most efficient
route
• Respond to route updates given by
the manager
User Personas: Driver
© Copyright 2000-2019 TIBCO Software Inc.
29
UI Designs
● Page Layouts
● Interactive pages to
demonstrate interactions
and workflows
● Reusable component styles
○ Buttons
○ links
○ charts
○ etc
● Design Guidelines
○ Colors
○ Fonts
○ Layouts
○ Interactions
© Copyright 2000-2019 TIBCO Software Inc.
30
Agenda
Project overview
Defining the user
experience foundation
Setting up the
application environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
31
● SPA - Single Page Application
● Performance - Virtual DOM = Faster/More efficient page loading
● Easy to Learn, Lots of documentation/community
● Easy to test
● Pre configured projects CLI (Create-React-App) to automatically setup project
○ Package Managers
○ All startup packages setup
○ Starting point for initializing an app
● Not really a framework
Why React.js?
© Copyright 2000-2019 TIBCO Software Inc.
32
● SASS - Compiled CSS
● BEM - CSS Structure
● Normalize.css or CSS reset -
Remove default browser styling
● CSS Grid Layout
● Responsive
Front End: Best Practices
● Typescript - Superset of javascript, static types
○ ES6 - Babel
○ Lint, Prettifier - Code cleanup post
processes
● React
○ Axios - HTTP Client
○ Redux - State Management
○ React Router
CSS JavaScript
React.js
© Copyright 2000-2019 TIBCO Software Inc.
33
● Testing
○ Jest - framework
○ Enzyme - DOM traversal helper
○ E2E - Cypress, protractor
● CI/CD
○ Docker - Container for application
○ Husky - commit hooks
○ Git - Git Flow
Front End: Best Practices Cont.
© Copyright 2000-2019 TIBCO Software Inc.
34
● Translate Designs into HTML
○ Break pages apart into components and identify reusable pieces
○ Develop all components separately and assemble
○ Style HTML to exactly match design comps
○ Work with designers to develop expected interaction behaviors
● Testing functionality
○ TDD - Test driven development
○ Code Coverage
Front End Development Process Overview
© Copyright 2000-2019 TIBCO Software Inc.
35
● How Visualize.js works:
○ Global instance
○ Log into services using Authentication to
create session
○ Send Request through Javascript API
○ Instance adds report to specified DOM location
○ Returns data
● Local vs Served
○ Importing Locally
■ Download the latest version of the
Javascript file from Jaspersoft Server
■ Download Visualize Styles From the
Jaspersoft Server
■ Put both in public folder
■ Import using the index.html
Interfacing With Jaspersoft using
Visualize.js
36
● Javascript Helper Class
○ Interact with global instance of Visualize by accessing API with our own functions
■ Login/Logout w/ SSO token
■ Get Reports
■ Get Ad-hoc Reports
■ Get Input Controls
■ Get List of Reports (Resources Search)
■ All methods return data if needed
○ Wrapped requests in promises
■ Helps order when things are loaded
■ Use “promiseAll()”, to pause page loading until all resources are loaded
■ More Control
Interfacing With Jaspersoft using
Visualize.js Cont.
© Copyright 2000-2019 TIBCO Software Inc.
37
Agenda
Project overview
Defining the user
experience foundation
Setting up the application
environment
Preparing data
© Copyright 2000-2019 TIBCO Software Inc.
38
• Public data through the General Bikeshare Feed Specification
“GBFS” API
• Trip data from bikeshare systems
• Generated data to support app use cases: KPIs, people
• User profiles
• Transactional updates for actions
Data supports the application and
visualizations
© Copyright 2000-2019 TIBCO Software Inc.
39
• Make it fast to meet user expectations
• Don’t filter and analyze in the UI: too much data?
• Centralize calculations and aggregations as much as
possible: avoid sprawl
• How do you scale? Watch backend per user compute,
memory and data access
• Make it current
• Data has to be live: microservices
• Data security is a backend process
Making data support app user experience
© Copyright 2000-2019 TIBCO Software Inc.
40
Key Takeaways
40
Get complimentary
eBook from
Jaspersoft.com
• User requirements first, design second
• Use best practices for setting up application
foundation
• Optimize data access to support user expectations
41
Get involved with the demo app
“How we built it” webinar
series
*Ongoing
Workshops and
documentation
* First workshop available Jul 16 on Jaspersoft
Community
Guided demo app for on-
demand consumption
*Available on Jaspersoft.com
Access to source code for app
and dataset
* Available Jul 16 on Jaspersoft BikeShare GitHub
repo
© Copyright 2000-2019 TIBCO Software Inc.
© Copyright 2000-2019 TIBCO Software Inc.

Getting Started: How to Set Up Your "Data as a Feature" Project

  • 1.
    Getting Started (Part 2/ 5) Data as a Feature webinar series How to set up your data as a feature project
  • 2.
  • 3.
    3 Hello from theproject team! 3 Shane Swiderek Product Marketing Manager, TIBCO San Francisco, CA Chad Lumley Senior UI Developer, projekt202 Seattle, WA Rachael Ross Solutions Architect, projekt202 Seattle, WA Crystal Phiripes Program Manager, projekt202 Dallas area, TX Sherman Wood Director Solution Consulting WW, TIBCO San Francisco, CA Xavier Harrell Sr. Experience Designer, projekt202 Dallas area, TX
  • 4.
    4 Agenda 4 Project overview Defining theuser experience foundation Setting up the application environment Preparing data
  • 5.
    5 Build a completedemo app to show the best practices of user experience and web application design, development process and implementation; leveraging Jaspersoft's "embedded BI" data visualizations, reports and self service. Bikeshare Project Goal © Copyright 2000-2019 TIBCO Software Inc.
  • 6.
    © Copyright 2000-2019TIBCO Software Inc. Embedded BI Reporting Inform the massesBI that blends in
  • 7.
    “Embedded” is not“BI” (business intelligence) New World Answers in context Intuitive visualizations embedded analytics Old World your app analytics Actionable Information © Copyright 2000-2019 TIBCO Software Inc.
  • 8.
    8 Apps do itdifferently… © Copyright 2000-2019 TIBCO Software Inc. Data Product Design Data as a feature, UX Driven Analytics
  • 9.
    Web Developers don’t thinkabout “BI” Your audience are consumers, not data analysts! Reports: Interactive and distributed Self Service: with guard rails Visualizations and Dashboards Deliver © Copyright 2000-2019 TIBCO Software Inc. Data for UX: APIs
  • 10.
    10 Current Web AppArchitectures
  • 11.
    • An integrated,seamless result, consistent with design • A productive development process • A tight fit into the application architecture • Flexible security/personalization • Performance and scalability on demand for a wide variety of use cases and workloads Excellent data visualization for apps provides… © Copyright 2000-2019 TIBCO Software Inc.
  • 12.
    • UX-driven designworkflow • Use visual and JavaScript frameworks • https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0 • Build data microservices manually • not web developer skills? => a major headache • Reporting is data dumps or a custom framework • Self service is not implemented or limited • Security rules implemented manually in UI, data access Current web development processes © Copyright 2000-2019 TIBCO Software Inc.
  • 13.
    • Service andtools to build and run the visualizations and data access • Simple, powerful APIs to embed • Security rules leveraging single sign on, multi-tenancy • Out of the box self service and reporting • Scalable configurations ⮚ Faster, cheaper, easier to maintain and evolve… Embedded development with Jaspersoft © Copyright 2000-2019 TIBCO Software Inc.
  • 14.
    14 Bikeshare project timeline Assemble projectteam Determine use case Create application style guide Research user personas Design application UX Choose tech stack & set up app foundation “Wrestle” data into shape Develop UI layout Develop reports & visualizations Embed reports & visualizations into app UI Testing & bug fixes Implement self-service BI into app Define project goals Project start Month 1 Month 2 Month 3 Month 4 Implement self-service BI into app Ongoing iteration © Copyright 2000-2019 TIBCO Software Inc.
  • 15.
    Implementing Jaspersoft Deploy &manage your platform Server Cloud or on-premises Open web development platform Clustering, built-in multi-tenancy Connect to your data Data Tier Relational, Big Data, NoSQL ETL, data virtualization, direct Metadata layer, in-memory engine Inside any app or process Delivery Javascript API Extensive REST APIs Mobile apps & SDKs Your apps Output Create beautiful reports & visualizations Pixel Perfect and complex designs via IDE Self-Service via browser © Copyright 2000-2019 TIBCO Software Inc.
  • 16.
    16 ● Agile process:2 week sprints, standups, JIRA, Slack ● Team makeup ● Chose a scenario: Bikeshare "franchise management" ○ Public bikeshare systems ● Defined personas ● UX design: look and feel, workflows and visualizations to support personas ○ Invision, Zepplin ● Detailed design ○ Data dictionary ○ Workflow and UI details: defining meaning Project Process © Copyright 2000-2019 TIBCO Software Inc.
  • 17.
    17 ● Development environmentand tools ● Architecture ● Requirements for different roles ● Visual framework: CSS Grid, React ● Jaspersoft integration into UI: visualize.js, REST, iFrame ● App to Jaspersoft SSO Project Process - Infrastructure © Copyright 2000-2019 TIBCO Software Inc.
  • 18.
    Jaspersoft as aservice to applications Repository Database Services Web applications, Load balancer Browser user Web services client Repository database Data sources Email Services External Auth e.g. CAS, LDAP, JAAS © Copyright 2000-2019 TIBCO Software Inc.
  • 19.
    19 Architecture Load balancer orProxy Bikeshare DBRepository DB JasperReports Server Node.js API Nginx. Static site or Node.js © Copyright 2000-2019 TIBCO Software Inc.
  • 20.
    TIBCO Jaspersoft ProductFamily Jaspersoft Studio Desktop report designer for creating pixel-perfect reports JasperReports Library World’s most popular Java reporting library JasperReports Server Reports, visualizations, APIs Self-serviceDistribute Secure & manage Data visualization and reporting microservice JasperReports IO Data virtualization: blending multiple data sources Jaspersoft ADS Jaspersoft ETL Data integration for improved reporting & analysis TIBCO Cloud Integration (Connect) Low Code cloud APIs, Data Replication © Copyright 2000-2019 TIBCO Software Inc.
  • 21.
    21 ● Data neededto support workflows and visualizations ● Web forms and visualizations (map, controls, dialogs) ● Jaspersoft visualizations and data for UI ● Jaspersoft data access and metadata (domain) to support self service ● CI/CD process: Github -> AWS deployment Project process - Artifacts © Copyright 2000-2019 TIBCO Software Inc.
  • 22.
    22 Agenda Project overview Defining theuser experience foundation Setting up the application environment Preparing data © Copyright 2000-2019 TIBCO Software Inc.
  • 23.
  • 24.
    24 Defining the Brand ©Copyright 2000-2019 TIBCO Software Inc.
  • 25.
    25 Defining the Brand ©Copyright 2000-2019 TIBCO Software Inc.
  • 26.
    26 ● User Personas ○Using information collected from user observations and interviews patterns and themes can be identified ○ Information is then grouped and analyzed to create personas Revealing Reality © Copyright 2000-2019 TIBCO Software Inc.
  • 27.
    27 ● View allRegions / Franchises ● Drill down into regions to view bike status ● Using available metrics and visual indicators, should be able to identify problem areas ● Take action to resolve problem areas User Personas: Manager © Copyright 2000-2019 TIBCO Software Inc.
  • 28.
    28 • Transport Bikesto Stations • Repair bikes at stations • Uses app to follow most efficient route • Respond to route updates given by the manager User Personas: Driver © Copyright 2000-2019 TIBCO Software Inc.
  • 29.
    29 UI Designs ● PageLayouts ● Interactive pages to demonstrate interactions and workflows ● Reusable component styles ○ Buttons ○ links ○ charts ○ etc ● Design Guidelines ○ Colors ○ Fonts ○ Layouts ○ Interactions © Copyright 2000-2019 TIBCO Software Inc.
  • 30.
    30 Agenda Project overview Defining theuser experience foundation Setting up the application environment Preparing data © Copyright 2000-2019 TIBCO Software Inc.
  • 31.
    31 ● SPA -Single Page Application ● Performance - Virtual DOM = Faster/More efficient page loading ● Easy to Learn, Lots of documentation/community ● Easy to test ● Pre configured projects CLI (Create-React-App) to automatically setup project ○ Package Managers ○ All startup packages setup ○ Starting point for initializing an app ● Not really a framework Why React.js? © Copyright 2000-2019 TIBCO Software Inc.
  • 32.
    32 ● SASS -Compiled CSS ● BEM - CSS Structure ● Normalize.css or CSS reset - Remove default browser styling ● CSS Grid Layout ● Responsive Front End: Best Practices ● Typescript - Superset of javascript, static types ○ ES6 - Babel ○ Lint, Prettifier - Code cleanup post processes ● React ○ Axios - HTTP Client ○ Redux - State Management ○ React Router CSS JavaScript React.js © Copyright 2000-2019 TIBCO Software Inc.
  • 33.
    33 ● Testing ○ Jest- framework ○ Enzyme - DOM traversal helper ○ E2E - Cypress, protractor ● CI/CD ○ Docker - Container for application ○ Husky - commit hooks ○ Git - Git Flow Front End: Best Practices Cont. © Copyright 2000-2019 TIBCO Software Inc.
  • 34.
    34 ● Translate Designsinto HTML ○ Break pages apart into components and identify reusable pieces ○ Develop all components separately and assemble ○ Style HTML to exactly match design comps ○ Work with designers to develop expected interaction behaviors ● Testing functionality ○ TDD - Test driven development ○ Code Coverage Front End Development Process Overview © Copyright 2000-2019 TIBCO Software Inc.
  • 35.
    35 ● How Visualize.jsworks: ○ Global instance ○ Log into services using Authentication to create session ○ Send Request through Javascript API ○ Instance adds report to specified DOM location ○ Returns data ● Local vs Served ○ Importing Locally ■ Download the latest version of the Javascript file from Jaspersoft Server ■ Download Visualize Styles From the Jaspersoft Server ■ Put both in public folder ■ Import using the index.html Interfacing With Jaspersoft using Visualize.js
  • 36.
    36 ● Javascript HelperClass ○ Interact with global instance of Visualize by accessing API with our own functions ■ Login/Logout w/ SSO token ■ Get Reports ■ Get Ad-hoc Reports ■ Get Input Controls ■ Get List of Reports (Resources Search) ■ All methods return data if needed ○ Wrapped requests in promises ■ Helps order when things are loaded ■ Use “promiseAll()”, to pause page loading until all resources are loaded ■ More Control Interfacing With Jaspersoft using Visualize.js Cont. © Copyright 2000-2019 TIBCO Software Inc.
  • 37.
    37 Agenda Project overview Defining theuser experience foundation Setting up the application environment Preparing data © Copyright 2000-2019 TIBCO Software Inc.
  • 38.
    38 • Public datathrough the General Bikeshare Feed Specification “GBFS” API • Trip data from bikeshare systems • Generated data to support app use cases: KPIs, people • User profiles • Transactional updates for actions Data supports the application and visualizations © Copyright 2000-2019 TIBCO Software Inc.
  • 39.
    39 • Make itfast to meet user expectations • Don’t filter and analyze in the UI: too much data? • Centralize calculations and aggregations as much as possible: avoid sprawl • How do you scale? Watch backend per user compute, memory and data access • Make it current • Data has to be live: microservices • Data security is a backend process Making data support app user experience © Copyright 2000-2019 TIBCO Software Inc.
  • 40.
    40 Key Takeaways 40 Get complimentary eBookfrom Jaspersoft.com • User requirements first, design second • Use best practices for setting up application foundation • Optimize data access to support user expectations
  • 41.
    41 Get involved withthe demo app “How we built it” webinar series *Ongoing Workshops and documentation * First workshop available Jul 16 on Jaspersoft Community Guided demo app for on- demand consumption *Available on Jaspersoft.com Access to source code for app and dataset * Available Jul 16 on Jaspersoft BikeShare GitHub repo © Copyright 2000-2019 TIBCO Software Inc.
  • 42.
    © Copyright 2000-2019TIBCO Software Inc.