Zebra Technologies Corporation · NASDAQ:ZBRA
Zebra Technologies — Technical Presentation (2023)
45 slides from Zebra Technologies's technical presentation, 2023
Slide 1: Choosing the best development environment
Choosing the best development environment Nicola De Zolt L. Software Engineer – Zebra Technologies 1
Slide 2: Agenda
Choosing the best development environment Agenda Why look at cross-platform frameworks? Zebra Enterprise Browser Flutter Ionic React Native .NET MAUI Frameworks comparisons Q&A ZEBRA TECHNOLOGIES
Slide 3: Why look at cross-platform frameworks?
Why look at cross-platform frameworks? Reasons & Trends • Reduced development costs – A single codebase that can be used to build apps for multiple platforms. Saves time and money • Increased development speed – You only need to learn one codebase – Reuse code and components across different project
Slide 4: Indoors / Outdoors – The Zebra perspective
Why look at cross-platform frameworks? Indoors / Outdoors – The Zebra perspective • Traditional Zebra mobile computers tools • Community trends for developers – React Native Datawedge plugin: npm, 244k – Library-based SDKs: EMDK – Intent APIs: Datawedge (DW), Workstation Connect (ZWC) – Javascript:
Slide 5: Zebra Enterprise Browser
Zebra Enterprise Browser ZEBRA TECHNOLOGIES
Slide 6: What is Enterprise Browser?
What is Enterprise Browser? Introduction • Enterprise Browser is a cross platform Industrial Browser which provides a rich JavaScript interface to Zebra value-adds such as – Android Intents – Barcode scanner – Printer – RFID – Keycapture – Custom keyboard etc – And camera, BT Scanners, Intent, Senso
Slide 7: Enterprise Browser SAP Bundle
Enterprise Browser SAP Bundle EB provides ready to use configuration bundle for SAP ITS Mobile customers • https://techdocs.zebra.com/enterprise- • Button Keyboard show/hide mapped to H/W browser/3-4/guide/sapandroid/ key • Customization Options • Ready to use DataWedge scanning • UI auto customizat
Slide 8: Dom Injection
Dom Injection Dom Injection – Use Cases • I have a legacy web application running on desktop and I want to run them on Android devices and access device capabilities • I am already running web application on the device. Now I want to add Enterprise and Zebra device capabilities • I am running applic
Slide 9: Multi-Session
Multi-Session Multi-Session – Tab approach ZEBRA TECHNOLOGIES
Slide 10: Multi-Session: Shortcut approach
Multi-Session Shortcut approach • Separate shortcuts to launch web apps within Enterprise Browser, each maintaining own state • Use the Shortcut Creator utility • Define shortcuts within an XML file with separate configuration and icon <Company> <Shortcut ID="0"> <Name>Barcode</Name> <ConfigPath>/Ba
Slide 11: Enterprise Keyboard Designer (EKD)
Enterprise Keyboard Designer (EKD) Examples of Custom Key Layouts • EKD is a Windows GUI tool that can be used to create customized key layouts • Layouts created with EKD work on Zebra Android devices that use Zebra's Enterprise Keyboard (EKB) 3.2 (and later) • Custom layouts can be displayed progra
Slide 12: EB Internal Web Server
Enterprise Browser EB Internal Web Server • You have the option to run a local, embedded web server on the device to service the application • When multiple Webview applications are deployed, all can run from a single embedded server or use discrete servers, each running on a different port • See al
Slide 13: Zebra Enterprise Browser
Zebra Enterprise Browser EB Supported platforms Zebra devices Popularity Highest among Zebra Web developers Prominent Technology Web plus Access to Zebra MX features and Android APIs Programming Language/ Web-related – HTML, JS Skills Pro’s Renders any WebApp and is capable of leveraging • investmen
Slide 14: Flutter
Flutter ZEBRA TECHNOLOGIES
Slide 15: Flutter
Flutter Flutter Supported platforms Android, iOS, Linux, macOS, Web, Windows Popularity Released in 2017, one of the most popular among Android developers, adoption doubling YoY. Prominent Technology UI Library Skia is platform agnostic, Powerful hot-reload capability Programming Language DART (C-st
Slide 16: Native Flutter App operating Zebra Datawedge
Flutter Native Flutter App operating Zebra Datawedge ZEBRA TECHNOLOGIES
Slide 17: Native app operating DW – Scanner gets triggered
Flutter Native app operating DW – Coding snapshots / Scanner gets triggered Sample code ZEBRA TECHNOLOGIES
Slide 18: Native app operating DW – Pushing scanner data to the UI
Flutter Native app operating DW – Pushing scanner data to the UI Platform code (Android) Sample code Shared Code-Dart ZEBRA TECHNOLOGIES
Slide 19: Web app operating Datawedge via Enterprise Browser APIs
Flutter Web app operating Datawedge via Enterprise Browser APIs ZEBRA TECHNOLOGIES
Slide 20: Web app operating Datawedge via EB APIs – Coding snapshots
Flutter Web app operating Datawedge via Enterprise Browser APIs Coding snapshots Sample code ZEBRA TECHNOLOGIES
Slide 21: Ionic
Ionic ZEBRA TECHNOLOGIES
Slide 22: Ionic
Ionic Ionic Supported platforms Ionic apps are truly cross-platform: able to run as an Android, iOS, Electron, and Progressive Web App (PWA), all from a single codebase Popularity Declining – 10y old, but with robust install base Prominent Technology Built-in support for JavaScript Frameworks (Vue,
Slide 23: Ionic-Angular Native App with Capacitor Plugin – Diagram
Ionic Ionic-Angular Native App with Capacitor Plugin – Diagram ZEBRA TECHNOLOGIES 23
Slide 24: Ionic-Angular Native App with Capacitor Plugin – Coding snapshots
Ionic Ionic-Angular Native App with Capacitor Plugin – Coding snapshots Java Android Angular / UI Sample code ZEBRA TECHNOLOGIES 24
Slide 25: Ionic-Angular Web App operating DW via EB APIs – Diagram
Ionic Ionic-Angular Web App operating DW via EB APIs – Diagram ZEBRA TECHNOLOGIES
Slide 26: Ionic-Angular Web App operating DW via EB APIs – Coding snapshots
Ionic Ionic-Angular Web App operating DW via EB APIs – Coding snapshotsz Enterprise Browser configuration file No need for a JS Interop. Layer like in Flutter Typescript code Sample code ZEBRA TECHNOLOGIES
Slide 27: Debugging
Ionic Debugging • Standard Android Studio Debugging features are available for native apps code-behind • UI Typescript code is rendered in a Webview even for native apps! So use chrome://inspect/#device ZEBRA TECHNOLOGIES
Slide 28: React Native
React Native ZEBRA TECHNOLOGIES
Slide 29: React Native
React Native React Native Supported platforms Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP + Oculus Popularity Head-to-head with Flutter – Slight decreasing but with vast install base Prominent Technology UI is built on native OS components, not emulated –App UI auto updates with OS P
Slide 30: React Native App operating Zebra Datawedge – Diagram
React Native React Native App operating Zebra Datawedge – Diagram ZEBRA TECHNOLOGIES
Slide 31: React Native App operating DW – Coding Snapshots
React Native React Native App operating DW – Coding Snapshots Sample code ZEBRA TECHNOLOGIES
Slide 32: React Native App operating DW – Coding Snapshots
React Native React Native App operating DW – Coding Snapshots ZEBRA TECHNOLOGIES
Slide 33: React Web App operating Zebra Datawedge via EB – Diagram
React Native React Web App operating Zebra Datawedge via EB – Diagram ZEBRA TECHNOLOGIES
Slide 34: React Native Web App operating DW via EB – Coding Snapshots
React Native React Native Web App operating DW via EB – Coding Snapshots UI Sample code Containe r Shared code Interop Layer UI React Components ZEBRA TECHNOLOGIES
Slide 35: .NET MAUI
.NET MAUI ZEBRA TECHNOLOGIES
Slide 36: .NET MAUI (formerly Xamarin)
.NET MAUI (formerly Xamarin) MAUI Supported platforms iOS, Android, macOS, Windows Popularity Prominent Technology Microsoft .NET / Blazor Programming Language C# - Allows most of identical codebase across platforms /Skills Pros High native-like performance An extensive ecosystem with C#, .Net, and
Slide 37: Standard and Blazor .NET Maui App operating Datawedge
.NET MAUI Standard and Blazor .NET Maui App operating Datawedge Standard Blazor ZEBRA TECHNOLOGIES 37
Slide 38: Standard and Blazor .NET Maui App operating Datawedge – Coding
.NET MAUI Standard and Blazor .NET Maui App operating Datawedge - Coding Android-specific code UI Shared code-behind Sample code DevTalk XAML UI ZEBRA TECHNOLOGIES
Slide 39: Conclusions
Conclusions ZEBRA TECHNOLOGIES
Slide 40: Cross-platform development environments
Cross-platform development environments Personal comparison of the Native solutions introduced earlier Flutter Ionic-Angular-Cap React Native .NET MAUI Nice feature(s) found Flutter doctor Wide community KB NativeModules allowed easy Super powerful inter-layers Components licensing communic. between
Slide 41: Comparing the Web solutions based on Enterprise Browser
Cross-platform development environments Comparing the Web solutions based on Enterprise Browser Flutter Ionic-Angular React Native for Web .NET MAUI Nice feature(s) found Skinnier project JS EB APIs directly integrated N/A N/A in Angular! Not that nice JS interop layer (app.js) More complex to setup
Slide 42: The Developer Angle
Cross-platform development environments The Developer Angle – Thoughts from personal experience and web searches Flutter Ionic React Native .NET MAUI Support Official doc quality Comprehensive, up-to-date Well regarded like Flutter’s, more Has improved over time, but harder to Comprehensive but stil
Slide 43: Links
Cross-platform development environments Links Relevant sources used for comparison • https://docs.flutter.dev/tos • https://ionic.io/blog/who-is-going-to-support-your-next-mobile-app-project-hint- not-react-native-or-flutter • https://reactnative.dev/community/support • https://dotnet.microsoft.com/
Slide 44: Questions
Questions ZEBRA TECHNOLOGIES
Slide 45: Thank You
Thank You ZEBRA and the stylized Zebra head are trademarks of Zebra Technologies Corp., registered in many jurisdictions worldwide. All other trademarks are the property of their respective owners. ©2023 Zebra Technologies Corp. and/or its affiliates. All rights reserved. ZEBRA TECHNOLOGIES