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

Transcription

1 Is your JavaScript ready for the Enterprise? What does that even mean? John JB Brock Senior Principal Product Manager Oracle Tools and Frameworks June 29, 2017

2 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

3 3

4 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

5 Extreme scale or loads, and availability. 5

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

7 Client-Server relationships are changing 7

8 8

9 9

10 10

11 Client based applications for the Enterprise 11

12 7 Building blocks for Enterprise JavaScript 1. Resist the hype 2. Understand your data 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

13 1. Resist the hype Said another way, Don t chase the shiny object! 13

14 Don t land airplanes from a phone! Data heavy monitoring systems Behind the firewall management systems

15 Extend, instead of replace Phone alerts Management / reporting

16 2. A relationship with your data Don t make old entity objects into REST interfaces Huge datasets aren t efficient Microservices can be to small

17 Understand your clients data needs To Large Taking existing data interfaces and just turning them into a REST interface can lead to bottlenecks at the network layer To Small Making dozens of microservices can lead to the need for client-side aggregation or additional server side data shaping

18 A better Relationship with your data

19 Demos

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

21 Responsive CSS 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

22 CSS3 vs. Responsive JavaScript 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 Interchange Oracle JET

23 Demos

24 4. Frameworks or Libraries? JavaScript options are huge! What is the best direction?

25

26

27 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,

28 Framework approach Library approach

29 5. Incorporate Modularity The larger the application, the more important modularity becomes.

30

31 Compare modular solutions RequireJS Webpack ECMAScript 2015(ES6) Modules and SystemJS Browserify

32 6. Abstractions over JavaScript, CSS What s easiest for your development team? The picture may not be clear for everyone in the same way.

33

34

35 7. Evaluate corporate frameworks Microsoft several IBM several Salesforce several SAP SAP Open UI5 and Fiori ING github.com/spectingular (AngularJSbased component framework) PayPal krakenjs.com (Node.js/Express based application framework) Oracle oraclejet.org (Toolkit of open source JavaScript libraries)

36

37 What is Oracle JET?

38 JET isn t just another framework, It s a Toolkit!

39 A toolkit of existing open source libraries and new Oracle componentry

40

41 Its modular! Use only the tools you need

42 Basic Components

43 Advanced Components

44

45

46

47

48

49 Accessibility Built-in

50 28 languages 190+ locales

51 Mobile ready

52 Native themes IOS Android Windows

53 Common Mobile Paradigms Off-Canvas Elements 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

54 Common Mobile Paradigms Pull to Refresh Pull to refresh is a touch gesture that is commonly used to fetch more data in a lazy-loading situation

55 Common Mobile Paradigms Swipe 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

56 Common Mobile Paradigms Sticky Headers Features such as sticky listview headers enable users to maintain information context

57 Common Mobile Paradigms Indexer Support for a an Indexer component Another screen real estate saver commonly seen on mobile lists

58 Common Mobile Paradigms Progressive Data Loading 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

59 Common Mobile Paradigms Animations The JET Router used in combination with the JET ojmodule can provide platform-appropriate animations Content can be swapped out inplace without updating the rest of the page

60 It s all Open Source!

61 Learn More!