UI Evolving Platform Evolving Architecture Evolving About Me - - PowerPoint PPT Presentation

▶
ui evolving platform evolving architecture evolving about
SMART_READER_LITE
LIVE PREVIEW

UI Evolving Platform Evolving Architecture Evolving About Me - - PowerPoint PPT Presentation

Apr 02, 2024 358 likes •859 views

UI Evolving Platform Evolving Architecture Evolving About Me Xianning ( Pronunciation Shining) Liu Full Stack Developer, Mobile SME, Lead Consultant @ThoughtWorks Tech Lead & Solution Architect. Recently focusing on scale mobile

slide-1
SLIDE 1

UI Evolving Platform Evolving Architecture Evolving

slide-2
SLIDE 2

2

About Me

Xianning ( Pronunciation ‘Shining’) Liu Full Stack Developer, Mobile SME, Lead Consultant @ThoughtWorks

  • Tech Lead & Solution Architect. Recently focusing on scale mobile

delivery & the architecture evolving beyond mobile era.

  • Tech evangelist, Tech writer & Conference speaker

https://github.com/xianlinbox https://www.linkedin.com/in/xianning-liu-17027846/

slide-3
SLIDE 3

3

UI Evolving

slide-4
SLIDE 4

4

Natural UI v3 Natural UI v1 Graphic UI Command UI Machinery UI Natural UI v2

1989

Web

2016

Bots

2018

Azure IoT Hub

2018

Amazon Go store

Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev

slide-5
SLIDE 5

5

Platform Evolving

slide-6
SLIDE 6

6

1980’s

Platform Key Players Development Paradigm Service Accessibility Product Form

1990’s 2008’s

  • Microsoft,
  • Oracle,
  • SAP
  • Facebook,
  • Google
  • Amazon
  • Apple,
  • Google

Client Dominant Development Server Dominant Development Client Dominant Development

  • Packaged

Software

  • Web App
  • SaaS
  • Mobile App

Buy Disks & Licenses Access directly through browser Install from App store

slide-7
SLIDE 7

7

App Fatigue

slide-8
SLIDE 8
slide-9
SLIDE 9

9

slide-10
SLIDE 10

10

Facebook split Messenger out to be a standalone app, then enhance its functionality to be Messenger Platform which allow service provider to build their own chatbot to connect with facebook users through conversation. Slack build its own Bot store，Let service provider to build their own chatbot to connect with facebook users through conversation.

…

slide-11
SLIDE 11

11

2016: Beginning of conversational App

slide-12
SLIDE 12

12

Ecosystem

Channels Building Tools AI Platform Channels Integration Chatbot discovery & promotion Monitor & Analytics

slide-13
SLIDE 13

13

slide-14
SLIDE 14

14

1980’s

Platform Key Players Development Paradigm Service Accessibility Product Form

1990’s 2008’s 2016’s

  • Microsoft,
  • Oracle,
  • SAP
  • Facebook,
  • Google
  • Amazon
  • Apple,
  • Google
  • Facebook
  • Amazon
  • Google
  • Microsoft
  • Slack

Client Dominant Development Server Dominant Development Server Dominant Development Client Dominant Development

  • Packaged

Software

  • Web App
  • SaaS
  • Mobile App

Buy Disks & Licenses Access directly through browser

  • Chatbots
  • Alexa Skills
  • Google Action
  • Cortana Skills

Install from App store Access directly through messenger platform

slide-15
SLIDE 15

15

slide-16
SLIDE 16

16 Camera

Identifies the customer

QR Code Scanner

Scan the QR code on the user's phone to authorize them to enter

Pressure Sensor

Detect whether an item has been picked up an item and put back.

Face Recognition AI

Identifies the customer and captures their action.

Computer Vision Sensor Vision Deep Learning

slide-17
SLIDE 17

17

2018

Azure IoT Hub Google IoT Core AWS IoT Hub

slide-18
SLIDE 18

18

1980’s

Platform Key Players Development Paradigm Service Accessibility Product Form

1990’s 2008’s 2016’s 2018’s

  • Microsoft,
  • Oracle,
  • SAP
  • Facebook,
  • Google
  • Amazon
  • Apple,
  • Google
  • Facebook
  • Amazon
  • Google
  • Tencent
  • Microsoft
  • Amazon
  • Google
  • Alibaba

Client Dominant Development Server Dominant Development Server Dominant Development Client Dominant Development

  • Packaged

Software

  • Web App
  • SaaS
  • Mobile App

Buy Disks & Licenses Access directly through browser

  • Chatbots
  • Alexa Skills
  • Google Actions
  • System combined

with software and Hardware Client Dominant Development Buy devices Install from App store Access directly through messenger platform

slide-19
SLIDE 19

19

Architecture Evolving

From Mobile to Conversational to IoT

slide-20
SLIDE 20

20

ADDITIONAL PLATFORM

Already has iOS or Android app and API is ready. Need to build app for the other mobile channel.

MOBILE ENABLEMENT

Already have backend services built for website, need to extend services to mobile platform with mobile specific API (BFF).

BFF

MOBILE SERVICES

Need to build mobile first features.

BFF

Backend Services

slide-21
SLIDE 21

21

Users Interface

B F F

Backend Services

Backend Service

Mobile App

Middle Layer

slide-22
SLIDE 22

22

slide-23
SLIDE 23

23

Atomic Design

Design Elements Shared Component Feature Component Page Component

slide-24
SLIDE 24

24 Fonts

Header tags

The quick, bro...

The quick, brow...

The quick, brown f...

Here is our range of header tags H1

The quick, brown fox

H2 H3 H4 Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con-
  • dimentum. Nullam ultrices gravida libero, vitae consequat
ex ultrices non.

Fonts

Header tags

The quick, bro...

The quick, brow...

The quick, brown f...

Here is our range of header tags H1

The quick, brown fox

H2 H3 H4 Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con-
  • dimentum. Nullam ultrices gravida libero, vitae consequat
ex ultrices non. Header tags

The quick, bro...

The quick, brow...

The quick, brown f...

Here is our range of header tags H1

The quick, brown fox

H2 H3 H4 Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con-
  • dimentum. Nullam ultrices gravida libero, vitae consequat
ex ultrices non.

Containers

Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. Cras aliquam eu velit at venenatis. Phasellus eu nisl metus. Praesent sed vestibulum felis, eu suscipit libero. Container one This container is used when there is an image on the LHS <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> Header tags

The quick, bro...

The quick, brow...

The quick, brown f...

Here is our range of header tags H1

The quick, brown fox

H2 H3 H4 Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con-
  • dimentum. Nullam ultrices gravida libero, vitae consequat
ex ultrices non.

Buttons

Large buttons Here is our range of large buttons <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> More <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> More <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> More Design Base Elements Components Modules Development Templates

Fonts

Header tags

The quick, bro...

The quick, brow...

The quick, brown f...

Here is our range of header tags H1

The quick, brown fox

H2 H3 H4 Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con-
  • dimentum. Nullam ultrices gravida libero, vitae consequat
ex ultrices non. Design Base Elements Components Modules Development Templates Design Base Elements Components Modules Development Colours Design Typography Logo Design Principles Imagery Guidelines

Living Style Guide

slide-25
SLIDE 25

25

Native Cost Reusability Dynamic Update User Experience Community H5 React Native

High Low iOS/Android 2 Codebase iOS/Android/Web 1 Codebase iOS/Android Component Reuse Limited by App Store Controlled By Dev Controlled By Dev With Design Best Just so so Better Apple, Google, 10 years W3C, Standards comes very slow Facebook & Huge JS Community

Choosing the Right Mobile Tech Stack - By Aaron Brager

slide-26
SLIDE 26

26

slide-27
SLIDE 27

27

slide-28
SLIDE 28

28 BETA USERS DASHBOARD GIT

Push code

APP STORES CI MACHINES ENTERPRISE DISTRIBUTION

Beta release Beta push Test push App Store Submission Collect feedback

DEVICE LAB IOS & ANDROID SIMULATORS QA

slide-29
SLIDE 29

29

slide-30
SLIDE 30

30

Mobile Development Platform

slide-31
SLIDE 31

31

slide-32
SLIDE 32

32

slide-33
SLIDE 33

33

Messenger App is the new platform AI is the new UI Microservices is the essential architecture

Users Interface

…

A p p l i c a t i o n C o n n e c t o r

Backend Services Intent Parser

Natural Language Understanding Dialogue Management

Account Products Delivery Payment BI Report …

slide-34
SLIDE 34

34

slide-35
SLIDE 35

35

slide-36
SLIDE 36

36

Discovery Design Evolution

Bounded Context Current Biz API Refine Service Discovery Interface Recognition Continuous Evolutionary

Service Map API List ADR

Speed

  • f Change

Event Storming DDD Design Thinking API versioning API Management Safety

  • f Change

API Platform API Documentation

slide-37
SLIDE 37

37

Middle Layer Users Interface

…

Mobile App

B F F

Backend Services

Account Products Delivery Payment BI Report …

A p p l i c a t i o n C o n n e c t o r

Natural Language Understanding Dialogue Management

slide-38
SLIDE 38

38

slide-39
SLIDE 39

39

Users Interface

A p p l i c a t i o n C o n n e c t o r

Backend Services Intent Parser

Natural Language Understanding Dialogue Management

Account Products Delivery Payment BI Report …

Speech AI

Speech to Text Text to Speech Domain Identify

slide-40
SLIDE 40

40

Middle Layer Users Interface

…

Mobile App

B F F

A p p l i c a t i o n C o n n e c t o r

Natural Language Understanding Dialogue Management

B F F

Backend Services

Account Products Delivery Payment BI Report …

Speech to Text Text to Speech

slide-41
SLIDE 41

41

IoT Device IoT System Private IoT Platform

slide-42
SLIDE 42

42

Smart Cane for Blinds

slide-43
SLIDE 43

43

slide-44
SLIDE 44

44

Remote Health Control System

slide-45
SLIDE 45

45 Door Sensor

In-Field

T7 Platform

  • n AWS

Bluetooth Gateway MQTT, HTTP

Pill box

MQTT, HTTP

Heart rate Band

heart rate 
 & 
 step count

Cloud

  • pen / close


events

chair / waterpipe / closestool 
 vibration sensor * 3 Smart plug

Zigbee Gateway

  • pen / close


events electric
 consumption vibration
 events

HTTP HTTP

Web Apps Mobile Apps AWS IoT Hub AWS IoT Shadow AWS IoT rule engine DynamoDB AWS SNS Preprocessor API Gateway Device Communication & Control Transformation & Queue Data Storage Backend

T7 Platform on AWS

Redshift / S3 Queue - SQS Formula Algorithm Lambdas Cognito

slide-46
SLIDE 46

46

DaoCloud (DCE) PaaS Business Applications IoT Module Edge Device SDK Message Hub Thing Model Time Series Storage Identity Security Monitor Log API Rules Engine Data Pipeline Developer CLI Management UI Container Container Container Docker Swarm

Message Hub Device shadow Rule engine SDK & API Security

46

Private IoT Platform

slide-47
SLIDE 47

47

Users Interface

A p p l i c a t i o n C o n n e c t o r

Backend Services Intent Parser

Natural Language Understanding Dialogue Management

Account Products Delivery Payment BI Report …

IoT Gateway

Device Management Device Management Security Device Management Rule Engine

  • MQTT
  • HTTP
  • Modbus
  • CoAP
  • Ethernet
  • Cellular
  • WiFi
  • Bluetoot
  • Zigbee
  • Business Model Exploration
  • Device Sourcing
  • Gateway In Field
  • Multi Device Integration
  • Stability！
  • Security！
  • Data！Data！Data！
slide-48
SLIDE 48

48

Middle Layer Users Interface

…

Mobile App

B F F

A p p l i c a t i o n C o n n e c t o r

Natural Language Understanding Dialogue Management

B F F

Backend Services

Account Products Delivery Payment BI Report …

Speech to Text Text to Speech

…

Security Device Management Rule Engine

  • MQTT
  • HTTP
  • Modbus
  • CoAP
  • Ethernet
  • Cellular
  • WiFi
  • Bluetoot
  • Zigbee
slide-49
SLIDE 49

Q&A

THANK YOU!