Slides from the session at UI5con@SAP 2017.
DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!
OVERVIEW: This session will provide an overview about the UI5 Evolution topic. UI5 Evolution is thought as the innovation project of OpenUI5/SAPUI5 which focuses on evolution of the Modular Core, Build Tooling, Rendering & Controls and Programming Model. Our challenge will be to do this innovation in a compatible way so that also existing applications will be able to partially benefit.
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
UI5con 2017 - UI5 Evolution
1. Peter Muessig & Andreas Ecker, SAP
June 30, 2017
UI5
Evolution
DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!
9. 9
“Establish a future-proof foundation for code organization and dependency
management, enabling applications to run with just the minimum amount of
resources!”
Deprecation of
Sync XHR
Introduce async alternatives
to address risk of Google
Chrome changes. Create
more powerful foundation
with clear dependency
declaration.
Independence of
DOM and jQuery
Lower layers of the Core
become agnostic to typical
browser environments;
monolithic code gets broken
up.
Universal Core
Runs not only in browser-
based environments, but
also in DOM-less ones
(Node.js, Web Workers).
Allows compile-time pre-
processing on Node.js (e.g.
XML Templates).
Modular Architecture
Get rid of Globals, Modules
reorganized. Not just the Core but
the framework and libraries are
modular and apply best practice
patterns.
Embrace emerging
technologies
Benefit from evolving features
such as ES6 modules or ES6
language features. Be open to
support TypeScript for upper
levels or support transpiled code.
Configuration Options
Includes environment information
and runtime feature detection to
further structure the codebase
and make it flexible in a
parameterized way.
Modular Core
14. 14
“Create an open-source Node.js based build & development environment to
support application developers and framework developers!”
Self-contained packages
Generate a self-contained
application ready for deployment.
Leverage dependency management
and sophisticated bundling to only
include required, optimized
resources.
Advanced packaging
Feature-based builds to optimize
beyond module level by code
manipulations. Integration
scenarios (e.g. FLP) to be
addressed by dynamic bundling &
loading mechanisms.
Migration tools
Support existing applications to
migrate to the new asynchronous
alternatives of the Modular Core by
converting classic modules to UI5
AMD modules and to clean-up
Globals.
Command Line Interface
Implement a simplistic CLI which
assists developers during build and
development lifecycle based on a
dedicated set of standard build
modules.
Enhance Toolchain
Complete app lifecycle aspects
such as initial creation of a
individual, pre-configured app
project; improve dev experience
for minimal round-trip (e.g. watch
& reload) and provide additional
compile-time optimizations.
Agnostic build modules
Build modules shall be independent
from a specific task runner to recycle
them for arbitrary JavaScript
environments like Node, Grunt, Gulp,
… and should be even more used to
replace the existing in-house Maven
based toolchain.
Build Tooling
19. 19
“Decouple the rendering & controls from the programming model and make it
individually and universally usable!”
Static Renderer
Separate the API & behavior from
the renderer; only the renderer
should interact with the DOM;
establish a clear interface between
programming model and control
renderers
New Renderer Syntax
Define a new declarative syntax
for the renderers which improves
their readability and simplifies the
usage of tools on top of them
Rework of B’n’B Controls
The bread & butter controls of
UI5 should be re-implemented
with the new renderer syntax;
showcase that new concepts work
to replace the existing rendering
and protects developers from
common pitfalls of today
Simplified Composition
Reduce the overhead of control
composition by merging the
individual control renderers and
behaviors at build time without
writing manual glue code
Side-by-side Integration
The new rendering should be usable
side-by-side with the old rendering;
direct comparison of rendering
approaches; should support smooth
transition to new rendering framework
without breaking existing applications
Agnostic Proof
Verify the new renderers and behaviors
can be used within other programming
models to proof the agnosticity
Rendering & Controls
22. 22
Layered Architecture
UI5 Evolution
Build Tooling
Modular
Core
Rendering
&Controls
Static
Control
Renderers
Static
Control
Behavior
Declarative
Renderer
Syntax
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universal
JavaScript
Open Source
& Node.js
based
Agnostic
Build Modules
Developer &
Operational
Productivity
Bundling &
Loading
Simplified
Composite
Controls
Prog. Models
23. 23
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universal
JavaScript
Prog. Models
Build Tooling
Open Source
& Node.js
based
Agnostic
Build Modules
Developer &
Operational
Productivity
Bundling &
Loading
Rendering
&Controls
Static
Control
Renderers
Static
Control
Behavior
Declarative
Renderer
Syntax
Simplified
Composite
Controls
24. 24
Continue support for existing programming model and support trends to enable
reuse of individual UI5 layers for other programming models…
UI5 classic
Will be fully supported by UI5 evolution
but will only partially benefit from
improvements as e.g. the modules have
not been updated properly.
UI5 reactive
Not yet decided, but during the
Cheetah project we noticed that
reactive paradigms simplify the data
flow inside applications and is a clear
benefit for highly interactive
applications.
Programming Models
Reuse individual layers
Other programming models should be
able to reuse individual pieces (e.g.
the core and the rendering) of UI5
without the need to pull all pieces.
UI5 classic (migrated)
Will benefit as much as possible from
UI5 evolution as the modules have been
migrated and adopted to the UI5 AMD
syntax.
30. Thank you.
Contact information:
Peter Muessig
@pmuessig
Andreas Ecker
You are welcome to give feedback for this session
in the UI5con Event App
DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!
Notas do Editor
UI5 evolution is the successor of project Cheetah and the innovation project of UI5.
Start with the Duplo Block
Split into separate pieces => Modularization
Build the jet => Performance
Add the train => Trends
Why do we not do this together with the community?
- We need to learn what to do? We need a plan what to do and provide the basement/structures!
- We need to see how we can do that?
15min – 20min
The Whys:
“Remove sync XHR, leverage dependency analysis for existing bundling tools, standard module loaders, HTTP/2, etc.!”
“Make independent of DOM API and jQuery to structure and maintain code in a clean, layered architecture!”
“Universal Core allows for build time optimizations such as XML templating!”
“Allows to reduce footprint by picking and combining the individual parts needed, instead of a larger, monolithic code!”
“Helps to renovate the libraries concept – remove the runtime overhead!”
jquery.sap.* modules will be split into individual modules and used inside jquery.sap.* modules to ensure compatibility for legacy scenarios
20min-25min
Explain the importance of the build tooling
The Whys:
“Plays a central role for performance; a lot of runtime aspects shift to compile-time!”
“Supports developers in entire lifecycle, e.g. generating apps from sources, testing or scaffolding projects and assets!”
“Establish a familiar environment for developers, which can be easily enhanced with additional tools!”
“Is to become open-source and uses open-source to benefit from de facto standard tooling and innovations!”
“Bridges the gaps of today‘s Node.js tooling for large software projects and fulfills enterprise scaling requirements!”
---
Environment: CLI for simplistic and standard usage / individual build modules for integration aspects and custom usage
Continuous Transition Identify features of existing Maven build tools to be converted and complemented by node.js solutions.
Reference apps Provide and evolve sample apps that perfectly align with the development activities for a modular core and build tooling. Low complexity while showcasing all practical use cases.
Developing apps Generate a running app from sources, across code repos, unmodified and not relocated. For a maximum of debugging capabilities and improved developer efficiency.
Deploying apps Generate a self-contained application ready for deployment. Leverage dependency management and sophisticated bundling to only include required, optimized resources.
Hybrid mobile apps Demonstrate practical deployment of such a self-contained app package via Apache Cordova framework.
Demo: Comparision of preload and custom build…
Self-contained build => 1/3 size of preload build.
25min-30min
Composition: aggregates standard controls or other composites -> lower the amount of controls to provide
The Whys:
“Strict separation between rendering & programming model!”
“Rendering layer should be agnostic to support arbitrary programming models – without the overhead of using the UI5 programming model!”
“Reduce the amount of controls; establish better composition support without overhead!”
“Allow the usage of the rendering during runtime and compile-time!”
“Shift rendering to Web Workers!”
Demo: Showcase how the handlebars based rendering
Example of declarative renderer based on Handlebars
35min
Demo: Showcase a Fiori application with new codebase
Fiori Elements application runs on top of Evolution code base.
