Is your JavaScript ready for the Enterprise? · Title: How to Use the PowerPoint Template Author: production Subject: Corproate Presentation Template Created Date: 3/2/2017 9:49:18

Copyright © 2017, Oracle and/or its affiliates. All rights reserved. |

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

Copyright © 2017, Oracle and/or its affiliates. All rights reserved.

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.

2

Copyright © 2017, Oracle and/or its affiliates. All rights reserved. 3


“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

4


“Extreme scale or loads, and availability.”

5


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

6


Client-Server relationships are changing

7





Client based applications for the Enterprise

11


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!”

13


•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

HTML5

• 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


Demos


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

CSS3

• 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


Demos


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

need


Basic Components


Advanced Components







Accessibility Built-in


28 languages 190+ locales


Mobile ready


IOS

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

http://oraclejet.org/

Is your JavaScript ready for the Enterprise? · Title: How to Use the PowerPoint Template Author: production Subject: Corproate Presentation Template Created Date: 3/2/2017 9:49:18

Documents