Learn UI5 Compression Automation Task Runner Gulp StarterKit

Name: Learn UI5 Compression Automation Task Runner Gulp StarterKit
Rating: 3.6 (4 reviews)

Learn the new way of development of UI5 App

Created byCS PRO, UI5 Community Network

Last updated 9/2018

English

What you'll learn

Best experience of Project with UI5 new Library updates
You will Learn the new updates and development paradigm with UI5.
Covering all necessary in-depth concepts of custom development of SAPUI5
Learn SAPUI5 in Details UI5 Compression, Automation Task Runner, Gulp Starter Kit and Load Speed Improvement

Course content

1 section • 15 lectures • 1h 24m total length

Introduction-Compression, Speed Improvement & Task Automation for UI5 Applicatn2:09
Explore compression and performance improvement for UI5 apps, using plugins and gulp starter kit to automate deployment, testing, and leveraging Mardan libraries to deliver faster applications.
Understanding Async and Dependencies4:49
Explore how to improve web performance by managing synchronous and asynchronous loading, handling dependencies in SAP UI5 libraries, and automating load strategies for faster app startup.
Understanding Dependencies and Task Runners8:15
Explore how dependencies and task runners orchestrate asynchronous loading and compression of app assets, boosting production efficiency through continuous deployment and reduced file sizes.
Understanding Continuous Deployment , Overview of Babel, Gulp and Gulp Preload8:38
Explore continuous deployment with automation using Gulp, Babel, and Gulp Preload to compress, test, and inspect code before production, powered by a task runner and npm plugins.
Understanding Gulp UI5 Preload Lib and Seeing Overview Code3:00
Compress UI5 assets with a gulp plugin to reduce bundle size and speed up loading. Install via npm, run the gulp build, and enable asynchronous preload for faster browser performance.
Understanding UI5 Gulp Starter KIT Package.json6:29
Explore using the UI5 gulp starter kit, inspect package.json and babel, and manage dependencies with npm or yarn to enable compression and css for less file conversions in the source.
Understanding index.hbs Files and Yarn Build5:15
Explore index.hbs handlebars templating, dynamic content replacement, and asynchronous app creation, then set up yarn, install dependencies, and build and compress the project for optimal performance.
Executing Yarn Build and Executing the Default App3:01
Execute yarn to install dependencies and build, which also starts an http server, then access the app at localhost:3000 and use verbose mode to view logs when troubleshooting.
Understanding What Will Change After Build and Execute the UI5 Default App4:21
Understand how build and execute steps alter the UI5 default app by running a local server in dist, loading index, and testing compressed assets on a port.
Examining Network Waterfall Diagram for Load Sequence3:12
Explore the network waterfall diagram to analyze load sequence, observe a two-second app load, and see how compressed files, preload assets, and reduced dependencies reduce size and improve speed.
Making our CORE App Async by Adding Preload and Promises9:12
Learn how to make the core app load asynchronously by using preload and promises, loading components into a container, and ensuring asynchronous loading improves startup performance.
Preparing Path UI5 App for Preload and Compression - Structure and index.hbs8:01
Prepare a UI5 app for preload and compression by restructuring the project, archiving unused files, and aligning the source structure with the template.
Changing Package.json and Building Project With Yarn7:40
Change the package.json and project name, update references and dependencies, minification, and build with yarn, using verbose mode to diagnose errors and inspect logs.
Debugging the Project and Finding Cause of Failure3:00
Debug the project by tracing errors in the source index, package folder, and console to uncover why the app is broken and a compressed resource is missing.
Fixing the Error,Successfully Building Path UI5App &Sharing Deployment Structure7:20
Resolve UI5 build errors by removing a problematic resource folder and applying gulp starter kit compression, then verify manifest and deployment structure before deploying to production.

Requirements

Basic Knowledge of UI5

Description

Key highlights:

We will see how this tools can be utilized and how you can automate your deployment activities with the plugins which are already available.
After Completing this section you will be able to understand about gulp plugin which is used to compress UI5 Application and you will be able to understand how to deploy the compressed version of UI5 Application to production with minification, uglification and also you can do testing or automation testing with this Toolkit. This is a powerful framework and we will be focusing our attention to Open UI5.
We will show you some of the speed improvements parts. When it comes to making a SAPUI5 application and OpenUI5 app async in nature.
We will highly recommend this course to everyone those who want to understand how to compress your app to increase the performance and also how to use the modern libraries to automate the task runner-up.

In this Course we have covered the Compression and Performance Improvement of UI5 Application.

- In this Section we will be covering some of the existing tool-kits which will help us to improve the efficiency of UI5 Application.

- We will see how this tools can be utilized and how you can automate your deployment activities with the plugins which are already available.

- After Completing this section you will be able to understand about gulp plugin which is used to compress UI5 Application and you will be able to understand how to deploy the compressed version of UI5 Application to production with minification, uglification and also you can do testing or automation testing with this Toolkit. This is a powerful framework and we will be focusing our attention to Open UI5.

- We will show you some of the speed improvements parts. When it comes to making a SAPUI5 application and OpenUI5 app async in nature.

- We will highly recommend this course to everyone those who want to understand how to compress your app to increase the performance and also how to use the modern libraries to automate the task runner-up.

Who this course is for:

UI5 Developers
Designers
Architects