summaryrefslogtreecommitdiff
path: root/book/intro.tw
blob: a3b5b0909271ee0114fb8fb10adfcaf4552671f9 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@sect{Intro to Scala.js}
    @highlight.scala
        val graphs = Seq[(String, Double => Double)](
          ("red", sin),
          ("green", x => 2 - abs(x % 8 - 4)),
          ("blue", x => 3 * pow(sin(x / 12), 2) * sin(x))
        ).zipWithIndex
        dom.setInterval(() => {
          x = (x + 1) % w
          if (x == 0) Page.renderer.clearRect(0, 0, w, h)
          else for (((color, func), i) <- graphs) {
            val y = func(x/w * 75) * h/40 + h/3 * (i+0.5)
            Page.renderer.fillStyle = color
            Page.renderer.fillRect(x, y, 3, 3)
          }
        }, 10)
    @canvas(width:=100, height:=100, id:="example-canvas")
    @script(src:="example-fastopt.js")
    @script("Example().main('example-canvas')")

    @p
        @a("Scala.js", href:="http://www.scala-js.org/") is a compiler that compiles Scala source code to equivalent Javascript code. That lets you write Scala code that you can run in a web browser, or other environments (Chrome plugins, Node.js, etc.) where Javascript is supported.

    @p
        This lets you to develop web applications with the safety and toolability that comes with a statically typed language:

    @ul
        @li Typo-safety due to its compiler which catches many silly errors before the code is run
        @li In-editor support for autocomplete, error-highlighting, refactors, and intelligent navigation
        @li Very small compiled executables, in the 100-400kb range
        @li Source-maps for ease of debugging

    @p
        The value proposition is that due to the superior language and tooling, writing a web application in Scala.js will result in a codebase that is more flexible and robust than an equivalent application written in Javascript.

    @sect{Who this book is for}
        @p
            This book is targeted at people who have some experience in both Scala and Javascript. You do not need to be an expert in both, but I will skim over basic concepts in both languages to cut to the Scala.js specific points.
        @p
            Furthermore, this book aims to only give an overview of the main steps you need to perform (and ideas you need to understand) to get started using Scala.js. It isn't a comprehensive guide, so if you want to know something this book doesn't cover, feel free to ask on the @a("mailing list", href:="https://groups.google.com/forum/#!forum/scala-js").

    @sect{Why Scala.js}
        @p
            Javascript is the language supported by web browsers, and is the only language available if you wish to write interactive web applications. As more and more activity moves online, the importance of web apps will only increase over time. 

        @sect{Javascript-the-language}
            @p
                However, Javascript is not an easy language to work in. Apart from being untyped (which some people don't mind) Javascript is also extremely verbose, has a lot of surprising behavior, and has a culture that make even the simplest of patterns (e.g. instantiating an object) a debate between a dozen different and equally-bad options.
            @p
                To work in Javascript, you need the discipline to limit yourself to the sane subset of the language, avoiding all the pitfalls along the way:

            @img(src:="images/javascript-the-good-parts-the-definitive-guide.jpg")

        @sect{Javascript-the-platform}
            @p
                However, even as Javascript-the-language sucks, Javascript-the-platform has some very nice properties that make it a good target for application developers:

            @ul
                @li Zero-install distribution: just go to a URL and have the application downloaded and ready to use.
                @li Hyperlinks: being able to link to a particular page or item within a web app is a feature other platforms lack, and makes it much easier to cross-reference between different systems
                @li Sandboxed security: before the advent of mobile apps, web apps were the most secure runtime available, offering none of the risk or worry that comes with installing desktop software

            @p
                These features are all very nice to have, and together have made the web platform the success it is today.

        @hr

        @p
            This is where Scala.js comes in. As developers we want Javascript-the-platform, with its ease-of-distribution, hyperlinks and security characteristics. We do not want Javascript-the-language, with its propensity for bugs, verbosity, and fragility. With Scala.js, you can cross compile your Scala code to a Javascript executable that can run on all major web browsers, thus saving you from the endless stream of gotcha's like the one below:

        @highlight.javascript
            javascript> ["10", "10", "10", "10"].map(parseInt)
            [10, NaN, 2, 3] // WTF

        @highlight.scala
            scala> List("10", "10", "10", "10").map(parseInt)
            List(10, 10, 10, 10) // Yay!

        @p 
            Scala.js allows you to take advantage of the Javascript platform while still enjoying all the benefits of a concise, safe, modern language. The benefits of Scala are well documented, and I will not make a case here for Scala vs. some other language. Suffice to say, I believe it's a considerable improvement over programming in Javascript, and with Scala.js we can bring this improvement in development speed and happiness from the backend systems (where Scala has traditionally been used) to the front-end web application.

@sect{Getting Started}
    @p
        The quickest way to get started with Scala.js is to clone a("workbench-example-app", href:="https://github.com/lihaoyi/workbench-example-app"), go into the repository root, and run @code{~fastOptJS}

    @highlight.bash
        git clone https://github.com/lihaoyi/workbench-example-app
        cd workbench-example-app
        sbt ~fastOptJS