JavaScript for Swift Developers

A light-hearted talk about misconceptions and struggles of a Swift developer learning about the latest JavaScript features
and oddities.

Transcript

1. JAVASCRIPT for Swift Developers
4. SWIFT let dog = Dog(age: 3, furColor: "brown") print(dog) // => "Dog(age: 3)"
5. JAVASCRIPT let dog = new Dog(3, "brown"); console.log(dog); // => "Dog(age: 3)"
7. SUPERFICIAL
8. ▸ Both have variable declarations with let. ▸ Swift has parameter names. ▸ Different calls to make console prints. ▸ JavaScript has a new operator. ▸ JavaScript has semicolons.
9. VARIABLE DECLARATIONS ▸ var ▸ let ▸ const
10. var ▸ In Swift: declares a mutable variable ▸ In JavaScript: declares a variable which is hoisted within the function or global scope
11. let ▸ In Swift: declares an immutable variable, enforced beyond re-assignments for value types ▸ In JavaScript: declares a variable which is block-scoped
12. const ▸ Only in JavaScript: declares a variable which is block-scoped and not re-assignable
13. ;
14. WRITE MULTIPLE STATEMENTS IN A SINGLE LINE
15. IN SWIFT IT'S OPTIONAL.
16. IN JAVASCRIPT IT'S SOMETIMES OPTIONAL.
17. AUTOMATIC SEMICOLON INSERTION
18. return { name: "This is fine." };
19. return; { name: "This is fine." };
22. semi: ["error", "always"] // or: ["error", "never"]
23. BUT THERE IS MORE THAN THE SUPERFICIAL…
24. STEP BACK What do we compare?
25. SWIFT ▸ 2014: 1.0 ▸ … ▸ 2017-03-27: 3.1
26. JAVASCRIPT ▸ 1996: 1.0 ▸ 2000: 1.5 - ECMA 3rd edition ▸ 2010: ECMA 5th edition ▸ 2015: ECMA 6th edition - ES6 / ES2015
27. ENGINES ▸ JavaScriptCore ▸ V8 ▸ SpiderMonkey, Chakra, Carakan, …
29. SWIFT & JAVASCRIPT SUPPORT DIFFERENT PROGRAMMING PARADIGMS.
30. ▸ Imperative Programming ▸ Object-oriented Programming ▸ Declarative Programming ▸ Functional Programming ▸ Many things in between …
31. Let's talk about TYPES
32. SWIFT HAS A STRONG TYPE SYSTEM.
33. JAVASCRIPT HAS A DYNAMIC TYPE SYSTEM.
34. INHERITANCE
35. CLASSES IN SWIFT class Animal : CustomStringConvertible { var age: Int init(age: Int) { self.age = age } toString() { let className = String(describing: type(of: self)) return "\(className)(age: \(age))" } } class Dog : Animal { var furColor: String init(age: Int, furColor: String) { super(age: age) self.furColor = furColor; } }
36. JAVASCRIPT HAS MANY ⠀ ⠀
37. JAVASCRIPT'S PROTOTYPAL INHERITANCE function Animal(age) { this._age = age; } Object.defineProperty(Animal.prototype, "age", { get: function() { return this._age; }, }); Animal.prototype.toString = function() { return this.constructor.name + "(age: " + this.age + ")"; } function Dog(age, furColor) { Object.getPrototypeOf(Dog).call(this, age); this.furColor = furColor; } Dog.prototype = Object.create(Animal.prototype, { constructor: { value: Dog } });
38. ES6 SYNTAX class Animal { constructor(age) { this._age = age; } get age() { return this._age; } toString() { return `${this.constructor.name}(age: ${this.age})`; } } class Dog extends Animal { constructor(age, furColor) { super(age); this.furColor = furColor; } }
40. TYPESCRIPT class Animal { age: number; constructor(age: number) { this.age = age; } toString() { return `${this.constructor.name}(age: ${this.age})`; } } class Dog extends Animal { constructor(age: number, furColor: string) { super(age); this.furColor = furColor; } }
41. WHY THE UGLY? UNDER THE HOOD IT'S STILL THE SAME!*
42. EQUALITY?
43. SWIFT HAS ==.
44. SEMANTICS ARE ENCODED IN THE STANDARD LIBRARY AND EXTENSIBLE.
45. extension Animal : Equatable {} public function ==(lhs: Animal, rhs: Animal) { return lhs.age == rhs.age; }
46. JAVASCRIPT HAS MORE: == & ===
47. ==
48. ===
49. ROLL YOUR OWN class Animal { … isEqual(other) { return this.age === other.age; } }
50. Let's talk about ⠀⠀⠀⠀⠀⠀⠀⠀⠀ null
51. Swift has an explicit concept of nullability encoded in the type system.
52. JavaScript hasn't. IN ADDITION TO null, EVERYTHING CAN BE undefined.
53. null ▸ typeof null => "object" ▸ Literal
54. undefined ▸ typeof undefined => "undefined" ▸ Property of the global object ▸ Can be overwritten !
55. ! TYPESCRIPT TO THE RESCUE!
56. let u: undefined = undefined; let n: null = null;
57. // In Swift func greet(name: string) { … } func greet(name: string?) { … }
58. // In TypeScript // when compiled with --strictNullChecks function greet(name: string) { … } function greet(name: string | undefined = undefined) { … }
59. ECO SYSTEM
60. SWIFT RUNS ON … ▸ Mac and iOS devices ▸ Linux ▸ (Android) ▸ (Windows)
61. JAVASCRIPT RUNS … everywhere
62. JavaScript is an assembly language. — Erik Meijer
63. ASM.JS
65. Let's talk about ⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀ ⠀ ⠀
66. The Dream IMPLEMENT THE APP ONCE & DEPLOY IT ON ALL PLATFORMS
67. REALITY? Platforms have different requirements!
68. SHARE THE BUSINESS LOGIC But not UI ⠀ ⠀
69. ! DEPENDENCY MANAGEMENT
70. Reminder SWIFT IS INTEROPERABLE WITH OBJECTIVE-C
71. OBJECTIVE-C DEVELOPERS HISTORICALLY USED … ▸ No dependencies ▸ Git Submodules ▸ CocoaPods
72. WITH SWIFT, MOST USE: ▸ CocoaPods ▸ Carthage ▸ Swift Package Manager
73. NO CENTRAL CODE REGISTRY, YOU RELY ON PRIVATE HOSTED REPOSITORIES.
74. JAVASCRIPT HAS … ▸ NPM for Node.js ▸ Different approaches for frontend code: Bower or Browserify / Webpack etc.
75. NPM IS A PACKAGE MANAGER AND A PLATFORM.
76. YOU SUBMIT ACTUAL CODE.
77. ! NO FULL DEPENDENCY RESOLUTION BY DEFAULT
78. PITFALLS OF RECURSIVE RESOLUTION MyApp@1.4.2 !"" BananaKit@1.3.2 # $"" monkey@1.1.0 $"" monkey@1.0.7
79. import BananaKit from 'bananakit'; import Monkey from 'monkey'; const monkey = new Monkey(); const tree = new BananaKit.Tree(); monkey.visit(tree); // => TypeError: m.climb is not a function // at tree.accept (bananakit.js) // at monkey.visit (monkey.js)
80. DIFFERENT APPROACHES FOR LOCKING YOUR DEPENDENCIES ! ▸ Commit node_modules ▸ npm shrinkwrap ▸ Yarn
81. ⠀ ⠀ ⠀ ⠀ THE STATE OF AFFAIRS?
82. questions.forEach((question) => { question.ask(); });
83. THANKS FOR YOUR ATTENTION! @MRACKWITZ MR@REALM.IO