xianningliu

2020-02-27 58浏览

1.UI Evolving Platform Evolving Architecture Evolving
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 speakerhttps://www.linkedin.com/in/xianning-liu-17027846/https://github.com/xianlinbox2
3.UI Evolving 3
4.1989 Web 2016 Bots 2018 Amazon Go store 2018 Azure IoT Hub Machinery Command UI UI Graphic UI Natural UI v1 Natural UI v2 Natural UI v3 Ignore Script Dev Desktop Dev Web Dev Mobile App Dev Chatbot Dev Skills Dev IoT Dev 4
5.Platform Evolving 5
6.1980’s Platform 1990’s 2008’s Key Players ‣ Microsoft, ‣ Oracle, ‣ SAP ‣ Facebook, ‣ Google ‣ Amazon ‣ Apple, ‣ Google Development Client Dominant Server Dominant Client Dominant Paradigm Development Development Development Product Form ‣ Packaged Software ‣ Web App ‣ SaaS ‣ Mobile App Service Accessibility Buy Disks & Licenses Access directly Install from App through browser store 6
7.App Fatigue 7
8.
9.9
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. … 10
11.2016: Beginning of conversational App 11
12.Ecosystem Channels Building Tools AI Platform Monitor & Analytics Chatbot discovery & promotion Channels Integration 12
13.13
14.1980’s 1990’s 2008’s 2016’s Platform Key Players ‣ Microsoft, ‣ Oracle, ‣ SAP ‣ Facebook, ‣ Google ‣ Amazon ‣ Apple, ‣ Google ‣ Facebook ‣ Amazon ‣ Google ‣ Microsoft ‣ Slack Development Client Dominant Server Dominant Client Dominant Paradigm Development Development Development Server Dominant Development Product Form ‣ Packaged Software Service Accessibility Buy Disks & Licenses ‣ Web App ‣ SaaS ‣ Mobile App Access directly Install from App through browser store ‣ Chatbots ‣ Alexa Skills ‣ Google Action ‣ Cortana Skills Access directly through messenger platform 14
15.15
16.Computer Vision Sensor Vision Deep Learning QR Code Scanner Scan the QR code on the user's phone to authorize them to enter Camera Identiﬁes the customer Pressure Sensor Detect whether an item has been picked up an item and put back. Face Recognition AI Identiﬁes the customer and captures their action. 16
17.Azure IoT Hub 2018 Google IoT Core AWS IoT Hub 17
18.1980’s Platform 1990’s 2008’s 2016’s 2018’s Key Players ‣ Microsoft, ‣ Oracle, ‣ SAP ‣ Facebook, ‣ Google ‣ Amazon ‣ Apple, ‣ Google ‣ Facebook ‣ Amazon ‣ Google ‣ Tencent Development Client Dominant Server Dominant Client Dominant Paradigm Development Development Development Server Dominant Development ‣ Microsoft ‣ Amazon ‣ Google ‣ Alibaba Client Dominant Development Product Form ‣ Packaged Software Service Accessibility Buy Disks & Licenses ‣ Web App ‣ SaaS ‣ Mobile App Access directly Install from App through browser store ‣ Chatbots ‣ Alexa Skills ‣ Google Actions Access directly through messenger platform ‣ System combined with software and Hardware Buy devices 18
19.Architecture Evolving From Mobile to Conversational to IoT 19
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 20
21.Interface Users Mobile App Middle Layer #'' Backend Services #BDLFOE 4FSWJDF 21
22.22
23.Design Elements Shared Component Feature Component Atomic Design Page Component 23
24.Fonts 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 condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. Header tags Here is our range of header tags H1 The quick, bro... H2 The quick, brow... H3 The quick, brown f... H4 The quick, brown fox Design Fonts Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequatBsaesmepEelreemliteinntcsondimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies lectus, eu pulvinar turpis. Ut consequat semper elit in con- dimentum. NuClolammpuoltrniceenstgsravida libero, vitae consequat ex ultrices non. Modules Header tags Here is our range of header tags Development H1 The quick, bro... H2 TTehmpelatqesuick, brow... H3 The quick, brown f... H4 The quick, brown fox Design Fonts Praesent ullamcorper ultricies lectus, eu pulvinar turpis. Ut consequatBDsaeessmeigpnEelreemliteinntcsondimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. ultricies Colours lectus, eu pulvinar turpis. Ut consequat semper elit in con- dimentum. ex ultrices nNouCnlol.aTmmyppuooltgrnricaeepnshtygsravida libero, vitae consequat Logo Modules Header tDaegssign Principles Here is our range of header tags DeIvmealogeprmy Genuitdelines H1 The quick, bro... Base Elements H2 TTehmpelatqesuick, brow... H3 TCohmepoqneuntisck, brown f... H4 The quick, brown fox Modules Development Living Style Guide Containers 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 condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. CHoenatdaeinr etar gosne THheirseciosnotuarinrearnigseuosfehdewahdeenr ttahgesre is an image on the LHS H1 The quick, bro... H2 The quick, brow... H3 The quick, brown f... H4 The quick, brown fox 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.JillSmith50EveJackson94Buttons 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 condimentum. Nullam ultrices gravida libero, vitae consequat ex ultrices non. LHaeragdeebr utattgosns Here is our range of lhaergaedebruttatognss H1 TheMore quick, bro... H2 The quick, brow...The quick, brown f... H3JillSmithThe H450quick, brown foxEveJackson94MoreJillSmith50EveJackson94MoreJillSmith5024
25.Cost Reusability Dynamic Update User Experience Community Native High iOS/Android 2 Codebase Limited by App Store Best Apple, Google, 10 years H5 React Native Low iOS/Android/Web 1 Codebase iOS/Android Component Reuse Controlled By Dev Controlled By Dev With Design Just so so Better W3C, Standards comes very slow Facebook & Huge JS Community Choosing the Right Mobile Tech Stack - By Aaron Brager 25
26.26
27.27
28.Push code GIT DASHBOARD CI MACHINES Beta push Test push Beta release App Store Submission ENTERPRISE DISTRIBUTION Collect feedback APP STORES IOS & ANDROID SIMULATORS DEVICE LAB QA BETA USERS 28
29.29
30.Mobile Development Platform 30
31.31
32.32
33.Interface Users Intent Parser Natural Language Understanding Dialogue Management "QQMJDBUJPO $POOFDUPS … .FTTFOHFS"QQJTUIFOFX QMBUGPSN "*JTUIFOFX6* Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU .JDSPTFSWJDFTJTUIF FTTFOUJBMBSDIJUFDUVSF 33
34.34
35.35
36.Current Biz Service Discovery Bounded Context Interface Recognition Discovery Design API Continuous Evolutionary Reﬁne Evolution Design Thinking Event Storming DDD Service Map API Documentation API Management API versioning API Platform API List Speed of Change Safety ADR of Change 36
37.Users Interface Mobile App … Middle Layer #'' "QQMJDBUJPO $POOFDUPS Natural Language Understanding Dialogue Management Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU 37
38.38
39.Interface Users Speech AI Speech to Text Domain Identify Text to Speech Intent Parser Natural Language Understanding Dialogue Management "QQMJDBUJPO $POOFDUPS Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU 39
40.Interface Mobile App Users … Middle Layer # ' '# ' ' "QQMJDBUJPO$POOFDUPS Speech to Text Text to Speech Natural Language Understanding Dialogue Management Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU 40
41.IoT Device IoT System Private IoT Platform 41
42.Smart Cane for Blinds 42
43.43
44.Remote Health Control System 44
45.Smart plug electric  consumption Door Sensor open / close  events vibration  events chair / waterpipe / closestool   vibration sensor * 3 Zigbee Gateway Pill box Heart rate Band open / close  events heart rate   &  step count Bluetooth Gateway In-Field T7 Platform on AWS MQTT, HTTP AWS IoT Hub MQTT, HTTP AWS IoT Shadow Device Communication & Control AWS IoT rule engine HTTP Redshift / S3 Cognito Web Apps T7 Queue - SQSPlatfoDrymnamoDB on AWS Lambdas HTTP API Gateway Preprocessor Formula Algorithm AWS SNS Transformation & Queue Data Storage Mobile Apps Backend Cloud 45
46.Private IoT Platform Message Hub Device shadow Rule engine Security SDK & API Business IoT Module Edge Device SDK Message Hub Identity PaaS Container Applications Thing Model Time Series Storage Data Pipeline Security Monitor DaoCloud (DCE) Docker Swarm Container Rules Engine Log Management UI Developer CLI API Container 46 46
47.Users Interface •MQTT •HTTP •Modbus •CoAP •Ethernet •Cellular •WiFi •Bluetoot •Zigbee IoT Gateway Device Management Security Rule Engine Intent Parser Natural Language Understanding Dialogue Management "QQMJDBUJPO $POOFDUPS Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU ‣ #VTJOFTT.PEFM&YQMPSBUJPO ‣ %FWJDF4PVSDJOH ‣ (BUFXBZ*O'JFME ‣ .VMUJ%FWJDF*OUFHSBUJPO ‣ 4UBCJMJUZĆ ‣ 4FDVSJUZĆ ‣ %BUBĆ%BUBĆ%BUBĆ 47
48.Users Interface Mobile App … •MQTT •HTTP •Modbus •CoAP •Ethernet •Cellular •WiFi •Bluetoot … •Zigbee Middle Layer #''#'' "QQMJDBUJPO$POOFDUPS Device Management Security Rule Engine Speech to Text Text to Speech Natural Language Understanding Dialogue Management Backend Services "DDPVOU 1SPEVDUT %FMJWFSZ 1BZNFOU … #*3FQPSU 48
49.5)"/,:06 Q&A