is your javascript ready for the enterprise? · title: how to use the powerpoint template author:...

Is your JavaScript ready for the Enterprise? What does that even mean?

John “JB” Brock Senior Principal Product Manager Oracle Tools and Frameworks March 01, 2017

Safe Harbor Statement

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.

“Enterprise software, also known as enterprise application software (EAS), is computer software used to satisfy the needs of an organization rather than individual users.” – Wikipedia

“Extreme scale or loads, and availability.”

“Basically means that it's complicated enough, that you can build consulting business around it.” – Vartec, stackoverflow

Client-Server relationships are changing

Client based applications for the Enterprise

7 Building blocks for Enterprise JavaScript

1. Resist the hype 2. Rediscover HTML5 as an application framework 3. Compare responsive design between CSS and JavaScript 4. Evaluate the framework vs. library approach 5. Incorporate modularity 6. Evaluate abstractions over JavaScript, CSS, and HTML 7. Evaluate corporate frameworks

1. Resist the hype Said another way, “Don’t chase the shiny object!”

•Data heavy monitoring systems

•Behind the firewall management systems

Don’t land airplanes from a phone!

•Phone alerts

•Management / reporting

Extend, instead of replace

Semantic markup: <article>, <header>

New input types: e-mail, URL, color

New Intellisense/Auto Completion

Validation attributes, 'required' and 'pattern'

2. Rediscover HTML

Original HTML

• Designed as a language for semantically describing scientific documents

• A response to demands for multimedia experiences (animations, games, movies, and audio)

• Also contains new built-in application development features

• Semantic elements help Accessibility

HTML and HTML5

3. Responsive design with CSS and JavaScript Things may look and behave the same, but have important differences.

Original CSS

• Designed as a stylesheet language for describing the look and feel of documents

• Over 50 modules make up CSS3

• “Media Query “ most well known

• Tailor to different resolutions

• Enable responsive design

• But... also take a look at JavaScript for this

Responsive CSS

Show/Hide

• Elements remain in the DOM

• Bound data is still loaded

Load/Unload

• Only included in DOM as needed

• Adjust REST calls dynamically

• Response.js – http://responsejs.com

• Interchange – http://foundation.zurb.com

CSS3 vs. Responsive JavaScript

4. Frameworks or Libraries? JavaScript options are huge!

What is the best direction?

Different libraries for different purposes

App Frameworks & Libs

Angular, Knockout, Backbone, Vue, React, Ember, …

Module Systems

RequireJS, Browserfy, Webpack, …

Build Systems

Grunt, Gulp, Brunch, …

Testing Frameworks

Protractor, Jasmine, Qunit, Karma, …

Framework approach Library approach

The larger the application, the more important modularity becomes.

5. Incorporate Modularity

Compare modular solutions

RequireJS

http://requirejs.org/

Webpack

https://webpack.js.org/

ECMAScript 2015(ES6)

Modules and SystemJS

Browserify

http://browserify.org/

What’s easiest for your development team?

The picture may not be clear for everyone in the same way.

6. Abstractions over JavaScript, CSS

7. Evaluate corporate frameworks • Microsoft – several

• IBM – several

• Salesforce – several

• SAP – SAP Open UI5 and Fiori

• ING – github.com/Spectingular (AngularJS-based component framework)

• PayPal – krakenjs.com (Node.js/Express based application framework)

• Oracle – oraclejet.org (Toolkit of open source JavaScript libraries)

What is Oracle JET?

JET isn’t just another

framework, It’s a Toolkit!

A toolkit of existing open source

libraries and new Oracle

componentry

Its modular! Use only the tools you

Basic Components

Advanced Components

Accessibility Built-in

28 languages 190+ locales

Mobile ready

Android

Windows

Native themes

• Off-canvas regions allow content to be hidden off-screen until invoked by the user or application

• Very common UI pattern on devices with smaller screens

Common Mobile Paradigms Off-Canvas Elements

• Pull to refresh is a touch gesture that is commonly used to fetch more data in a lazy-loading situation

Common Mobile Paradigms Pull to Refresh

• The swipe gesture is an extremely prevalent touch gesture on mobile devices

• On list views, swipe is often used to take action on list items

Common Mobile Paradigms Swipe

• Features such as sticky listview headers enable users to maintain information context

Common Mobile Paradigms Sticky Headers

• Support for a an Indexer component

• Another screen real estate saver commonly seen on mobile lists

Common Mobile Paradigms Indexer

• Often used in conjunction with pull to refresh, JET allows applications to give their users feedback when data is being loaded

• Here a busy indicator is displayed

• JET uses iconography that mirrors the mobile device’s native UI

Common Mobile Paradigms Progressive Data Loading

• The JET Router used in combination with the JET ojModule can provide platform-appropriate animations

• Content can be swapped out in-place without updating the rest of the page

Common Mobile Paradigms Animations

It’s all Open Source!

Learn More!

http://oraclejet.org

@oraclejet

is your javascript ready for the enterprise? · title: how to use the powerpoint template author:...

Documents

efficient context-sensitive output escaping for javascript...

modern customer experience event ppt template€¦ ·...

javascript javascript introduction. q. what is javascript?...

effizientes speichern von...

the gccprd storm surge suppression study for the upper...

essential javascript -- a javascript tutorial

oracle openworld event branded...

devices, big data and real world evidencetitle hsgbu saas...

mysql enterprise security€¦ · title: powerpoint...

101300 deep dive getting started with peoplesoft … ·...

manual - deepmatter · 2020. 7. 14. · 3.2.2 molecule...

safe harbor statement - oracle · title: how to use the...

emerging technologies impacting governments · title:...

javascript awesomeness: javascript for beginners

active directory and windows security integration with...

get value from iot in operations, predictive maintenance...

state of the dolphin - percona · title: how to use the...

voluntary product accessibility template...html, css, and...

meet the new commerce - rainfocus · 2019-06-27 · title:...

mysql 5.7: performance improvements in optimizer...title...