Our Agenda

  • What is OpenUI5?
  • Jump Start: Hello World
  • The Model-View-Controller Pattern
  • Out Of The Box Features
  • Digging Deeper
  • Workshop

What OpenUI5 is ...

  • a JavaScript UI library, with jQuery as fundament
  • +180 extendable UI controls out of the box
  • MVC, data-binding, templating, ...
  • Enterprise-grade (e.g. I18N)
  • Running on almost any device and browser of your choice
  • Controls and layouts are designed for perfect responsiveness
  • Is Open Source, uses Open Source as well as proven web standards

.. but, wait ... SAP?

How OpenUI5 apps can look like

Jump Start

follow me: bit.ly/devweek-start

Model View Controller Pattern

MVC done right

  • MVC divides your web app into 3 interconnected parts
  • Minimize dependencies and make every part easy to write, read and extend
  • Different view types and models should be there to meet everyone’s needs

MVC Example: How the pieces tie together

Data is represented in a model (e.g. JSON or XML via AJAX)

{ "first": "John", "last": "Doe", "age": 16,"sex": "M” }

A controller represents the methods that can be implemented. It can modify models and views

function isTeenager(person) {
  // teens are between 13 and 19 years old
  if(person.age > 13 && person.age < 19) {
    return true;
  }
  return false;
}

A view is the UI implementation. It triggers the controller and can modify the model

Out Of The Box Features

just to name a few

Two-way data-binding

Responsive & Adaptive

Internationalization

Accessibility, Keyboard Support & Diagnostics (Ctrl-Alt-Shift-S)

Extensibility: The path to custom controls

Digging Deeper

some links to get you started

Bringing you to the next step

Our next step for today: Get from this app ...

... to this app

Workshop

Workshop