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

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 delivery & the architecture evolving beyond mobile era. • Tech evangelist, Tech writer & Conference speaker https://www.linkedin.com/in/xianning-liu-17027846/ https://github.com/xianlinbox 2

UI Evolving 3

2018 2018 1989 2016 Amazon Azure Web Bots Go store IoT Hub Natural Machinery Command Graphic Natural Natural UI v3 UI UI UI UI v1 UI v2 Desktop Dev Chatbot Dev Ignore Script Dev Mobile App Dev IoT Dev Web Dev Skills Dev 4

Platform Evolving 5

1980’s 1990’s 2008’s Platform ‣ Microsoft, ‣ Facebook, ‣ Apple, Key Players ‣ Oracle, ‣ Google ‣ Google ‣ SAP ‣ Amazon Development Server Dominant Client Dominant Client Dominant Paradigm Development Development Development Product Form ‣ Packaged ‣ Web App ‣ Mobile App Software ‣ SaaS Service Buy Disks & Access directly Install from App Accessibility Licenses through browser store 6

App Fatigue 7

9

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. … 10

2016: Beginning of conversational App 11

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

13

2008’s 1980’s 1990’s 2016’s Platform ‣ Facebook ‣ Microsoft, ‣ Amazon ‣ Facebook, ‣ Apple, Key Players ‣ Oracle, ‣ Google ‣ Google ‣ Google ‣ SAP ‣ Microsoft ‣ Amazon ‣ Slack Server Development Server Dominant Client Dominant Client Dominant Dominant Paradigm Development Development Development Development ‣ Chatbots Product Form ‣ Packaged ‣ Web App ‣ Alexa Skills ‣ Mobile App Software ‣ SaaS ‣ Google Action ‣ Cortana Skills Service Buy Disks & Access directly Install from App Access directly through Accessibility Licenses through browser store messenger platform 14

15

Computer Vision Sensor Vision Deep Learning Pressure Sensor Face Recognition AI Camera QR Code Scanner Detect whether an item has Identi fi es the customer and Identi fi es the Scan the QR code on the been picked up an item and captures their action. customer user's phone to authorize put back. them to enter 16

2018 Azure IoT Hub Google IoT Core AWS IoT Hub 17

2008’s 2018’s 1980’s 1990’s 2016’s Platform ‣ Facebook ‣ Microsoft ‣ Microsoft, ‣ Facebook, ‣ Apple, ‣ Amazon ‣ Amazon Key Players ‣ Oracle, ‣ Google ‣ Google ‣ Google ‣ Google ‣ SAP ‣ Amazon ‣ Tencent ‣ Alibaba Development Server Dominant Server Dominant Client Dominant Client Dominant Client Dominant Paradigm Development Development Development Development Development Product Form ‣ System combined ‣ Chatbots ‣ Packaged ‣ Web App with software and ‣ Mobile App ‣ Alexa Skills Software ‣ SaaS Hardware ‣ Google Actions Service Buy Disks & Access directly Install from App Access directly through Buy devices Accessibility Licenses through browser store messenger platform 18

Architecture Evolving From Mobile to Conversational to IoT 19

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 BFF Need to build mobile first features. Backend Services 20

B F F Backend Service Backend Services Interface Middle Layer Users Mobile App 21

22

Design Shared Feature Page Elements Component Component Component Atomic Design 23

Design Design Design Fonts Fonts Fonts Containers Buttons Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Design Base Elements Base Elements Ut consequat semper elit in condimentum. Nullam ultrices Ut consequat semper elit in condimentum. Nullam ultrices Ut consequat semper elit in condimentum. Nullam ultrices Ut consequat semper elit in condimentum. Nullam ultrices Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies gravida libero, vitae consequat ex ultrices non. ultricies gravida libero, vitae consequat ex ultrices non. ultricies gravida libero, vitae consequat ex ultrices non. ultricies gravida libero, vitae consequat ex ultrices non. ultricies Colours lectus, eu pulvinar turpis. Ut consequat semper elit in con- lectus, eu pulvinar turpis. Ut consequat semper elit in con- lectus, eu pulvinar turpis. Ut consequat semper elit in con- lectus, eu pulvinar turpis. Ut consequat semper elit in con- lectus, eu pulvinar turpis. Ut consequat semper elit in con- dimentum. Nullam ultrices gravida libero, vitae consequat dimentum. Nullam ultrices gravida libero, vitae consequat dimentum. Nullam ultrices gravida libero, vitae consequat dimentum. Nullam ultrices gravida libero, vitae consequat dimentum. Nullam ultrices gravida libero, vitae consequat Components Components Typography ex ultrices non. ex ultrices non. ex ultrices non. ex ultrices non. ex ultrices non. Logo Modules Modules Header tags Header tags Header tags Design Principles Header tags Large buttons Header tags Container one Here is our range of header tags Here is our range of header tags Here is our range of header tags This container is used when there is an image on Here is our range of header tags Here is our range of large buttons Here is our range of header tags Development Development Imagery Guidelines the LHS The quick, bro... The quick, bro... The quick, bro... The quick, bro... The quick, bro... H1 H1 H1 H1 H1 More Base Elements The quick, brow... The quick, brow... The quick, brow... The quick, brow... The quick, brow... Templates Templates H2 H2 H2 H2 H2 <table style="width:100%"> The quick, brown f... The quick, brown f... The quick, brown f... The quick, brown f... The quick, brown f... <tr> H3 H3 H3 Components H3 H3 <td>Jill</td> <td>Smith</td> The quick, brown fox The quick, brown fox The quick, brown fox The quick, brown fox The quick, brown fox <td>50</td> H4 H4 H4 H4 H4 </tr> Modules <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> Development Praesent ullamcorper ultricies lectus, eu </table> pulvinar turpis. Ut consequat semper elit in condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. Cras aliquam eu velit at venenatis. More Phasellus eu nisl metus. Praesent sed vestibulum felis, eu suscipit libero. <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <table style="width:100%"> Living Style Guide </tr> <tr> <tr> <td>Jill</td> <td>Eve</td> <td>Smith</td> <td>Jackson</td> <td>50</td> <td>94</td> </tr> </tr> <tr> </table> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> More 24 <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr>

Native H5 React Native High Low Cost iOS/Android iOS/Android/Web iOS/Android Reusability 2 Codebase 1 Codebase Component Reuse Dynamic Limited by Controlled By Dev Controlled By Dev Update App Store With Design User Best Just so so Better Experience Apple, Google, W3C, Standards Facebook & Huge JS Community 10 years comes very slow Community Choosing the Right Mobile Tech Stack - By Aaron Brager 25

26

27

CI MACHINES IOS & ANDROID SIMULATORS Beta push DEVICE Test push Push code LAB Beta release ENTERPRISE DISTRIBUTION QA GIT App Store Collect Submission feedback BETA USERS APP STORES DASHBOARD 28

29

Mobile Development Platform 30

31

32

Products Delivery Account Payment A p p l i c a t i o n C o n n e c t o r BI Report essential architecture Microservices is the AI is the new UI platform Messenger App is the new Intent Parser Interface Backend Services Natural Language Understanding Dialogue Management Users … … 33

34

35