Indiana Nimphius and the JavaScript Temple of Doom

Transcription

1

2 Indiana Nimphius and the JavaScript Temple of Doom Frank Nimphius, Senior Principal Product Manager Oracle Mobility PlaLorm November, 2016 Copyright 2016 Oracle and/or its affiliates. All rights reserved.

3 "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." Copyright 2016 Oracle and/or its affiliates. All rights reserved. 3

4 WHAT IF? Image courtesy of "Tanatat" at FreeDigitalPhotos.net Copyright 2016 Oracle and/or its affiliates. All rights reserved. 4

5 Snapshot for Tomorrow's History Books Server-less, cloud na^ve applica^ons REST service oriented architecture Mobile primary, Web secondary Mul^ Channel Programming Language? Image courtesy of "KROMKRATHOG" at FreeDigitalPhotos.net Copyright 2016 Oracle and/or its affiliates. All rights reserved. 5

6 Why JavaScript? Why Now? Copyright 2016 Oracle and/or its affiliates. All rights reserved. 6

7 Who Moved My Cheese? Image courtesy of "TAW4" at FreeDigitalPhotos.net Copyright 2016 Oracle and/or its affiliates. All rights reserved. 7

8 Survival of the Fi>est. - Herbert Spencer, Principles of Biology, 1864 Src: hdps://en.wikipedia.org/wiki/survival_of_the_fidest Copyright 2016 Oracle and/or its affiliates. All rights reserved. 8

9 Survival of the Fidest in Programming Frank's EvoluCon Theory in SoEware ApplicaCon Development Sogware lives in an ecosystem that gives it a context Mainframe, Client-Server, Web, Service Orienta^on, Mobile, Cloud Context changes (should) lead to sogware re-evalua^on Not all context changes end fatal for a language Mobile con^nues the Web Cloud con^nues principles of Service Oriented Architecture Some languages adapt beder to change than others Others then start to fade Copyright 2016 Oracle and/or its affiliates. All rights reserved. 9

10 JavaScript is No longer the boring DOM manipulation language it used to be Cloud and mobile ready Available for client and server side development Mature language Easy to learn Many online resources, 3 rd party libraries and code snippets Highly dynamic and flexible language No classes to create ahead of ^me JSON to JS object without intermediate conversion steps Copyright 2016 Oracle and/or its affiliates. All rights reserved. 10

11 Who uses JavaScript Today? Frontend - Backend - Full Stack Copyright 2016 Oracle and/or its affiliates. All rights reserved. 11

12 Stack Overflow Developer Survey 2016 Preferred Programming Language: Full Stack Developers JavaScipt 85.3 % SQL C# PHP AngularJS Java SQL Server Node.js 37.3 % 35.3 % 32.2 % 30.7 % 28.0 % 27.1 % 58.9 % Phyton LAMP 18.2 % 15.6 % hdp://stackoverflow.com/research/developer-survey-2016 Copyright 2016 Oracle and/or its affiliates. All rights reserved. 12

13 Stack Overflow Developer Survey 2016 Preferred Programming Language: Front End Developers JavaScipt 90.5 % AngularJS PHP 35.8 % 35.2 % Node.js SQL WordPress Java C# React Other 31.8 % 25.4 % 24.1 % 16.8 % 16.0 % 13.4 % 13.2 % hdp://stackoverflow.com/research/developer-survey-2016 Copyright 2016 Oracle and/or its affiliates. All rights reserved. 13

14 Stack Overflow Developer Survey 2016 Preferred Programming Language: Backend Developers JavaScipt SQL Java PHP 31.5 % 41.6 % 54.5 % 53.3 % C# Phyton SQL Server Angular Node.js Mongo DB 26.8 % 21.4 % 18.3 % 15.4 % 13.3 % 11.9 % hdp://stackoverflow.com/research/developer-survey-2016 Copyright 2016 Oracle and/or its affiliates. All rights reserved. 14

15 JavaScript Impera^ve, Func^onal Copyright 2016 Oracle and/or its affiliates. All rights reserved. 15

16 JavaScript or ECMAScript? Which shall I use? Copyright 2016 Oracle and/or its affiliates. All rights reserved. 16

17 ECMAScript JavaScript is a trademark of Oracle "Inherited" through the SUN acquisi^on ECMAScript is the official name European Computer Manufacturers Associa^on (ECMA) ECMAScript Language Specifica^on, Edi^on 6 (ECMA6, ES6, ECMA 2015) Each new ECMA version adds features to JavaScript Copyright 2016 Oracle and/or its affiliates. All rights reserved. 17

18 JavaScript or TypeScript? Which shall I use? Copyright 2016 Oracle and/or its affiliates. All rights reserved. 18

19 TypeScript Originally created by Microsog Open Source JavaScript superset Adds language features not in ECMAScript or features that are in an upcoming version of ECMA Script that are not yet broadly supported in browsers Adds sta^c typing Enforces typed variables and arguments Allows tools to catch mistakes at design ^me Code needs to be "transpiled" to target ECMAScript version Copyright 2016 Oracle and/or its affiliates. All rights reserved. 19

20 JavaScript is not difficult, just different! JavaScript beginner fails Uuuh, oooh, something went wrong Copyright 2016 Oracle and/or its affiliates. All rights reserved. 20

21 JavaScript Onboarding Problems Bad! Sweet dreams are made of this. Who am I to disagree? - Eurythmics, 1983 Copyright 2016 Oracle and/or its affiliates. All rights reserved. 21

22 "this" this Mary loves shopping. Last week she bought shoes. 'this' asks for trouble when a func^on that uses this is assigned to a variable a func^on that uses this is passed as a callback func^on 'this' is used inside an inner func^on 'strict mode' is used Doesn't execute in the context of which is define but how it is invoked call, bind, apply Copyright 2016 Oracle and/or its affiliates. All rights reserved. 22

23 Hois^ng JavaScript variable and func^on can be declared ager it has been used x = 5; //.. Do other work var x; test(); func^on test (){ x = 10; } var x; Works! Works! a(); var a = func^on test (){ x = 10; } var x; Doesn't Work! Uncaught TypeError: a is not a func^on Copyright 2016 Oracle and/or its affiliates. All rights reserved. 23

24 You Don't Know JS Kyle Simpson Helps you to master JavaScript Free online reading Copyright 2016 Oracle and/or its affiliates. All rights reserved. 24

25 Game changing JavaScript Frameworks Declara^ve, Modular Productivity boosting Copyright 2016 Oracle and/or its affiliates. All rights reserved. 25

26 About JavaScript Frontend Frameworks Scaffolding Build and Deploy Infrastructure A way to organize code Modular developments Leverage HTML 5 components Built-in responsive layouts Pre-built Styles, Bindings & Func^onality Image courtesy of Frank Nimphius Copyright 2016 Oracle and/or its affiliates. All rights reserved. 26

27 Single Page ApplicaCon Standard in JS Applica^on Development Copyright 2016 Oracle and/or its affiliates. All rights reserved. 27

28 Infrastructure & Build Frameworks It takes a village to raise a child. - African proverb Copyright 2016 Oracle and/or its affiliates. All rights reserved. 28

29 JavaScript Developer Challenge hdp://bit.ly/jsframeworkmists Copyright 2016 Oracle and/or its affiliates. All rights reserved. 29

30 hdp:// "Paralysis is a consequence of having too many choices" Copyright 2016 Oracle and/or its affiliates. All rights reserved. 30

31 Standing out from the Mists of Frameworks Popular in JavaScript Applica^on Development React Ionic Angular Bootstrap Ember.js Popular in Cloud Applica^on Development Copyright 2016 Oracle and/or its affiliates. All rights reserved. 31

32 Ionic MVC JavaScript framework Setup via command line interface Uses Gulp, Bower, Git, SASS and Node Uses Angular JS underneath Provides Applica^on Starter Templates Provides style classes and <ion- > HTML tags Cookbook Copyright 2016 Oracle and/or its affiliates. All rights reserved. 32

33 Angular Component based Components are like classes in Java Contain JS, HTML and CSS Have a lifecycle Exposed as custom HTML tag 2-Way Data Binding Supports ECMA 6 classes Developed in TypeScript Supports applica^on development with TypeScript, ECMA5, Dart Copyright 2016 Oracle and/or its affiliates. All rights reserved. 33

34 React Used, owned, developed by Facebook JavaScript and XML-esque Markup Components contain JS, HTML, CSS Business logic saved in component HTML converted to JS Virtual DOM Separates UI refresh from Applica^on View changes ES6 friendly, Support for JavaScript classes Uses JQuery Ajax calls to fetch data Copyright 2016 Oracle and/or its affiliates. All rights reserved. 34

35 Oracle JET JavaScript Extension Toolkit Recommenda^ons and best prac^ces for Enterprise JavaScript Collec^on of stable and popular open source JS libraries MVVM architecture JavaScript UI components 2-Way Data Binding Paderns, Templates, Tools Cookbook ORACLE JET 35 Copyright 2016 Oracle and/or its affiliates. All rights reserved.

36 Business maders. Not taste, nor hip and cool There is no Right or Wrong. Choose the framework you want and use Oracle JET. Designed to get things done! Copyright 2016 Oracle and/or its affiliates. All rights reserved. 36

37 JavaScript in Enterprise Applica^on Development Copyright 2016 Oracle and/or its affiliates. All rights reserved. 37

38 This world is not just students. And even if, most students would be out on a Pokémon hunt Copyright 2016 Oracle and/or its affiliates. All rights reserved. 38

39 Low-Code Development CiCzen Development on Steroids Addressing skill shortages and high demands for mobile and web applica^ons Quickly build and publish stand-alone applica^ons visually, or extend applica^ons Extending Rapid Mobile Applica^on Development (RMAD) paradigm Invi^ng core developers to ci^zen development tooling "Meet-in-the-Middle" applica^on development Browser based Copyright 2016 Oracle and/or its affiliates. All rights reserved. 39

40 Ci^zen Oracle Mobile ApplicaCon Accelerator Max Browser based Business Object oriented Part of Mobile Cloud Service On-device mobile applica^ons ApplicaCon Builder Cloud Service ABCS Browser based Business Object oriented Stand-alone Cloud Service Web and mobile web applica^ons Powered By Oracle JET Copyright 2016 Oracle and/or its affiliates. All rights reserved. 40

41 Oracle Enterprise JavaScript Applica^on Development Example: Oracle Mobile Cloud Service (MCS) Cloud Layer Citizen Developer Core Developer Developer Type MAX ABCS JET 3 rd Party JavaScript Framework Web Mobile Device Deployment Copyright 2016 Oracle and/or its affiliates. All rights reserved. 41

42 Summary JavaScript will not replace Java or PL/SQL JavaScript has a steep learning curve 'Survival of the Fidest' in cloud and mobile JavaScript frameworks enable JavaScript applica^on development Provide build and deploy infrastructure Guide the code organiza^on Component oriented and template based Low Code Development is easy with JavaScript Copyright 2016 Oracle and/or its affiliates. All rights reserved. 42

43 Snapshot for Tomorrow's History Books My answer JavaScript Oracle JET Image courtesy of "KROMKRATHOG" at FreeDigitalPhotos.net Copyright 2016 Oracle and/or its affiliates. All rights reserved. 43

44 Learning Oracle JET is easy! Passed tests after Watching a few Videos This guy learned Java and PL/SQL before YouTube URL bit.ly/jetmooc Copyright 2016 Oracle and/or its affiliates. All rights reserved. 44

45