Why do Java programmers hate pointers

Oliver Zeigermann JavaScript for Java developers

Transcript

1 Oliver Zeigermann JavaScript for Java developers

2 4 Prejudices 1. JavaScript is a dead language 2. Java as a language is cleaner and clearer than JavaScript 3. JavaScript applications are a mess 4. There is no decent IDE support for JavaScript

3 Prejudice: JavaScript is dead Quote (anonymous redhat developer): JavaScript is doomed to die

4 Why JavaScript now? Browsers are becoming more and more standard compliant IE6 is dead JS engines are becoming more and more mature and faster JS runs on every device JS is first class citizens on Windows 8 Since ECMAScript 5, JavaScript is good enough as a language, e.g. strict mode

5 HTML5 = HTML + CSS + JavaScript LocalStorage, SessionStorage, index DB, WebSql Canvas Web Workers DnD Web Sockets

6 Prejudice: Java as a language is cleaner and clearer than JavaScript Quote (anonymous clean coder): Your JavaScript looks like a merge conflict

7 basics

8 Hello World # 1

9 Hello World # 2

10 Hello World # 3 node -e "console.log ('hello World');"

11 functions function f1 (p1, p2) {return p1 + p2; } var result1 = f1 (1,2); console.log (result1); // => 3 var result2 = f1 (1); // WOW console.log (result2); // => NaN

12 objects var map = {key1: "value1", key2: 1}; var value1 = map.key1; var value2 = map ["key2"]; map.key1 = true; map.f = function () {return "Cool!" }; for (var key in map) {console.log (key + ":" + map [key]); }

13 Is JavaScript a Bad Language? The ugly or confusing parts of JavaScript are obvious and well known 1. Scopes 2. Prototype inheritance 3. How is this set? 4. Hoisting

14 No lexical scopes {} var shouldbelocal = "I am still here"; console.log (shouldbelocal); // => I am still here console.log (shouldbelocal); // => I am still here

15 scopes with IIFE (function () {var thatsthewaythecookiecrumbles = "I am gone"; console.log (thatsthewaythecookiecrumbles); // => I am gone}) (); console.log (thatsthewaythecookiecrumbles); // => ReferenceError

16 Prototype inheritance extends (horse, Animal); function Horse (name) {Animal.call (this, name); } Horse.prototype.move = function () {alert ("galloping ..."); Animal.prototype.move.call (this, 45); }; var bb = new horse (Black Beauty); bb.move ();

17 this this can be set in JavaScript in at least 5 ways 1. Global scope 2. Constructor 3. Method call 4. call / apply 5. bind How this is bound is not always easy, even for experienced JavaScript programmers

18 Hoisting console.log (doesnotexist); // Uncaught ReferenceError console.log (hoisted); // undefined var hoisted = 10; console.log (hoisted); // 10

19 ... but ...

20 Is Java a Clear and Simple Language? Please put all arms up. Now arm down if you don't understand completely or don't even know what the problem should be. Please be honest. Boxing / Un-Boxing Generics Initialization order for classes and inheritance

21 What's wrong here? public class GenericDatastoreServiceImpl & HasStringData, String> implements GenericDataService {String wat =; // Incompatible types}

22 Thesis: JavaScript and Java both have their bad parts, but we are already used to Java’s ...

23 JavaScript is not worse than Java, it is different

24 question block # 1 timebox: 5 minutes

25 Prejudice: JavaScript applications are chaos Quote (anonymous GWT developer): JavaScript applications are unstructured chaos and cannot be optimized

26 modules var module = {}; (function () {function InternalStuff () {...} function Person (name, age) {// uses class InternalStuff} Module.Person = Person;}) (); var olli = new Module.Person ("Olli", 42); Module.InternalStuff === undefined;

27 Live Demo: Best Practices Development Process

28 Summary Live- Demo # 1 1. There is a mature build tool (Grunt) for JavaScript, comparable to Gradle 2. Turnaround times almost non-existent 3. Production versions can be statically compiled and optimized

29 Summary Live- Demo # 2 4. There is a static (!) Dependency management (Bower), comparable to Maven / Ivy 5. Tools are installed via node / npm 6. Automated linters and tests are standard

30 Prejudice: There is no decent IDE support for JavaScript Quote (anonymous JavaScript developer): The best JavaScript IDE is vi

31 Live demo: JavaScript IDE WebStorm

32 Summary of Live Demo # 1 1. There are well-engineered test frameworks that are comparable to JUnit 2. Test runs and code coverage are tightly integrated in the IDE 3. Comprehensive checks with different tools are possible

33 Summary Live-Demo # 2 4. Code completion / code analysis / refactoring convenient but not always reliable 5. Additional type declarations (TypeScript / Closure Compiler) bring reliability

34 Best Practices Refactoring JavaScript # 1 1. Broad and meaningful test coverage (even more important than in Java) 1. Unit 2. Integration 2. Smallest possible modules with clear interfaces 3. Event bus

35 Best-Practices Refactoring 4. Introducing types JavaScript # 2 Google Closure Compiler TypeScript 5. No complex expressions in templates 6. Use powerful IDE

36 More Prejudices There is no standard, every browser implements its own dialect JavaScript is slow JavaScript, like CSS and HTML, is for designers, not for real developers. Large projects are not possible

37 Summary JavaScript is alive JavaScript and its environment are ripe for real applications There are reasonable JavaScript IDEs JavaScript is no uglier than Java, just ugly differently

38 Nathaniel Schutta, Tuesday, November 5: 30 am to 5:30 pm The JavaScript Developer's Toolchain

39 Kai Tödter, Wednesday, November 6th: 3 to 11:15 am TypeScript: The new JavaScript?

40 Ted Neward, Wednesday, November 6: 3pm to 11:15 am Busy Developer's Guide to NodeJS

41

42 Thank you for the attention questions / discussion Oliver

43 Bonus prejudice: JavaScript cannot be used to implement large, maintainable projects Quote (anonymous Java architect): Programming without a strong type system is like driving on the motorway without braking

44 What is a big project? Many thousands (hundreds of thousands?) Lines of code Many (external) dependencies Many developers are working on it Coming and going It lives for many years (sometimes several decades)

45 What does a big project need? The code must be easy to maintain. Modular, Analyzable, Refactorable. The code must be easy to read. Good documentation? There must be a usable dependency management. There must be a build management and CI. The code must be well tested, including tests that can be automated

46 AngularJS: Example of a large JavaScript project Number of JS lines (without tests): ~ 50k cd src; find. -name '* .js' xargs wc -l tests:> 30k unit and e2e JavaScript typically needs significantly less code than Java for the same task Internal modules ~ 10> 20 Dependencies on other projects including jquery, even as large as it has been living for 2009 core team at Google> 10> 300 external employees on the project

47 Automated build and CI dependency management via node / npm and bower build via grunt integration in Travis and Jenkins

48 JsDoc documentation similar to JavaDoc Generates the website directly

49 Google Closure Compiler Static type information in comments Related to JsDoc Extended by all constructs known from Java including visibility Type information is used for documentation Minification Static checks Better tree shaking WebStorm-IDE Code completion analysis Refactoring

50 Example Closure Annotations / ** Converts the specified string to lowercase. * {string} string String to be converted to lowercase. {string} Lowercase string. * / function lowercase (string) {}

51 Tests Unit tests with Jasmine E2E tests with anguluar scenario directly on the code examples in the documentation Automatic execution on every CI server Karma test runner PhantomJS: Headless Browser

52 Excursus: Do we need guys? Quote (anonymous JavaScript hacker): Declared types are for older people who are overwhelmed with dynamic languages

53 What is the advantage of declared, static types? Often heard: You can't make mistakes. The compiler offers a series of automatic tests through its type system. The program contains fewer errors

54 What is the real advantage? How severe is the impact? How hard is it to find the cause? However: Without declared, static types there is no reliable IDE support.

55 How do we deal with it? Option 1: Accept We know about this and adapt to it We define modules with very clear interfaces We keep these modules small We use the best possible IDEs We have a meaningful test coverage

56 How do we deal with it? Option 2: Declared types We add JavaScript declared types This gives us IDE support similar to that of Java Options are Google Closure Compiler and TypeScript Both are supported by WebStorm

57 Live Demo: The Giant Project Angular.js Automatic Build Automatic Tests Types with the Closure Compiler