UI5con HYBRID 2022: Learn App Development in UI5 and TypeScript (Workshop)

NOTE: some parts of this video are outdated, please check out the new video tutorial updated in summer 2023: https://www.youtube.com/watch?v=CRKNIiXZN6U

--------------------------------------

This workshop walks through a comprehensive tutorial to introduce developers to #UI5 application development in #TypeScript. It includes creating a basic application from the TypeScript template using the #EasyUI5 generator, TypeScript coding in regular UI controllers, as well as advanced topics like custom control development and using third-party libraries.

The workshop basically follows https://github.com/SAP-samples/ui5-typescript-tutorial, with additional explanations by the authors.

Prerequisites are: a current version of Node.js and a code editor supporting TypeScript development (preferably the free Microsoft Visual Studio Code). TypeScript knowledge is not required, but basic UI5 knowledge will help understand what you are doing.

Event: #UI5conHYBDIRD2022
Speaker: Andreas Kunz, SAP | Peter Muessig, SAP
---
00:00 Introduction
10:15 Exercise 0 - Getting Started (https://github.com/SAP-samples/ui5-typescript-tutorial)
15:06 Exercise 1 - Create And Run Your Application
19:40 Exercise 2 - Create The Initial User Interface And Set Up Routing
21:05 Exercise 2.1 - Understand how TypeScript and Modern JavaScript Syntax Influence the Code
26:37 Exercise 2.2 - Load Data
31:35 Exercise 2.3 - Extend the User Interface
39:22 Exercise 3 - Add Translated UI Texts
42:02 Exercise 4 - Enhance the User Interface And Use Formatters
42:14 Exercise 4.1 Add Formatter Functions to the Controller
46:00 Exercise 4.2 Extend the View to Show Incidence Numbers per State and Colored Icons
48:28 Q/A: Is It Planned To Reduce The Type Casts?
52:29 Exercise 5 - Create A Second View
01:02:30 Q/A: Is It Planned To Transfer The Module 'babel-plugin-transform-modules-ui5' To SAP?
01:04:46 Q/A: How To Troubleshoot Error "Cannot find type definition file for 'node_modules'"?
01:07:55 Exercise 6 Load Detailed History Data Into Another JSONModel
01:14:40 Exercise 7 - Create and Use A Custom Control
01:15:08 Exercise 7.1 Create A Custom Control
01:20:58 Exercise 7.2 - Use The Custom Control In The Detail View
01:22:53 Exercise 7.3 - Generate Control Interfaces to Resolve the TypeScript Errors
01:32:00 Is It Planned to Automate The Generation Of Control Interfaces
01:33:49 Q/A: What Needs To Be Done To Move An Existing Custom Library To TS?
01:34:54 Exercise 8 - Using NPM Packages
01:37:05 Exercise 8.1 - Install/Configure UI5 Tooling Extensions
01:39:48 Exercise 8.2 - Adding Chart.js to the LineChart
01:47:24 Q/A: Why Is The Import (From Chart.js) /auto?
___
Resources:
Exercises: https://github.com/SAP-samples/ui5-typescript-tutorial
Easy-UI5: https://github.com/SAP/generator-easy-ui5
UI5 TypeScript Application Template: https://github.com/ui5-community/generator-ui5-ts-app
(Custom) UI5 Controls in TypeScript: https://github.com/SAP-samples/ui5-typescript-helloworld/blob/custom-controls/README.md
Blog Post "Using Third-Party Libraries": https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/
UI5 & TypeScript Documentation: https://sap.github.io/ui5-typescript

Видео UI5con HYBRID 2022: Learn App Development in UI5 and TypeScript (Workshop) канала UI5