Blueprint for tutorials (was Re: Question on Javascript Library Interactions)

[Jonas Fonseca]

Hi,

So perhaps it is time to start adding tutorials, to help new developers to quickly get familiar with Scala.js. The js-interop section on the website is a great resource and reference, so the goal is to put some of that information into a bit more context.

Here is a possible rough "storyline" based loosely on the experiences of creating the slides for a presentation (https://github.com/jonas/scala-js-meetup) given at this week's Montreal Scala Meetup.

 - Getting started: setup an SBT project from scratch and run a "Hello, Scala.js" example

 - Testing your application: how to write Jasmine tests

 - Prototyping with js.Dynamic: interacting with the DOM

 - Using libraries: DOM and jQuery libraries

 - Creating your own typed wrappers: write wrappers for a JavaScript library or JSON response

 - Calling Scala.js from JavaScript

 - Preparing application for production: optimizing and packaging

Possible future additions:

 - Debugging Scala.js applications in the browser^WChrome

 - Performance tips: e.g. use native JS APIs, avoid Scala collections, how to profile a Scala.js application

The question is if 'prototyping with js.Dynamic' should come before the DOM stuff. The great thing with keeping it before is that there is a eureka moment when you switch to typed wrappers for an existing library, like Sébastien did in the presentation at Scala Exchange.

Also, we need to then find some fun thing to develop in the prototype. Something that ideally doesn't require a server necessarily but only some static JSON to emulate server requests. Something like a Scala book store or twitter feed/search app or simply the famous todo app example.

And finally, I would like input also regarding whether to offer the tutorial "solutions" in a git repository. This could be a help especially since it allows you to quickly "fast forward" (i.e. checkout a branch) to the part you want to do. Ideally, the tutorial should all be integrated into scala-js.org, but having the tutorial text as part of this future scala-js-tutorials would be handy too.

On Sat, Jan 25, 2014 at 8:38 PM, Li Haoyi <haoy...@gmail.com> wrote:

I don't think there's any convenient tutorial but...

- You'll need to include xdate.js somewhere on the page before you include the scalajs javascript files.

- If you have a class XDate() extends js.Object, then new XDate() in Scala translates into new XDate() in Javascript.

- var definitions and uses on any extends js.Object classes map directly to attribute get/sets, def and val definitions and uses map to attribute gets.

- Constructor params in the extends js.Object classes map to constructor params for the call to the javascript new XDate().

- Secondary constructors work as you would expect. The body of constructors is ignored. val and var definitions in constructors do what you would expect.

- class and object map to javascript classes and top-level-singleton objects.

- By default the name of the class or object is used to reference the javascript class or top-level-singleton. You can use @JSName if you want to customize it to something else. @JSName works on methods too.

- You can use @JSBracketAccess to make method calls that map to javascript thing[...] calls.

Most of what I said is repeated here, and you can take a look at this if you want a non-contrived example of this in the wild. Basically you make something extends js.Object and it maps directly to a javascript thing of the same name, and constructors/variables/methods/etc. behave as you would expect.

--
Jonas Fonseca

[Sébastien Doeraene]

Hi,

That sounds like a plan! :-)

I think developing a tiny game is more fun than a todo app or a store ... But then, that might be because I never wrote a todo app nor a store.

Cheers,
Sébastien

--
You received this message because you are subscribed to the Google Groups "Scala.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to scala-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Sebastian Nozzi]

Excellent idea(s) - Somehow related, I am starting to write cookbook "recipes" (inspired by the Scala Cookbook) for common Scala.js related "problems":

http://www.sebnozzi.com/category/frameworks/scalajs-frameworks/cookbook/

I have no problem for these to be incorporated to the official documentation, if suitable.

Cheers,

Sebastian

[Sébastien Doeraene]

Definitely suitable! A cookbook page under doc/ would be cool :-) Pull requests welcome!

Sébastien

[Sebastian Nozzi]

Allright, then I propose the following.

I'll add a "cookbook" section, with a layout of recipes grouped by themes.

They layout / index can, of course, be changed / improved.

I'll add the recipes I have worked so far to the documentation (that is, not linking to my blog but make it part of the Scala.js website).

Anyone can fill in remaining recipes (me included ;-)

What do you think?

Another question: do you think the official documentation has also place for "long" tutorials? For example: how to write a Tetris. My motivation for starting the cookbook / recipes was not to have to repeat basic stuff in the "longer" tutorials, but instead show step by step how to build something bigger / cooler. Has something a place in the official docs, or should it be kept in a separate space? (personal blog, etc.)

Cheers,

Sebastian

2014/1/26 Sébastien Doeraene <sjrdo...@gmail.com>

[Sébastien Doeraene]

Sounds good. Longer tutorials are good too!

Sébastien

[Travis Good]

Hi there, 

I've added a "noob problem log" style reply to this thread here:

https://groups.google.com/forum/#!topic/scala-js/3oEZAEqUZBY

Maybe it can help you as you try to approach the tutorials from the mindset of a complete novice.

T.

[Sebastian Nozzi]

On Sunday, 26 January 2014 19:05:34 UTC+1, Sébastien Doeraene wrote:

Definitely suitable! A cookbook page under doc/ would be cool :-) Pull requests welcome!

Pull request sent! ;-)

Feedback welcome on the sections / structure. Something missing? Something can be improved?

Feel also free to provide (fill-in) recipes in your area of expertise / interest.

Cheers,

Sebastian 

[Vincent Munier]

Hi,

I confirm that developing a game is definitely funnier than a todo app :)

For information purposes, I ported a simple HTML5 Canvas game to Scala.js. The live demo is here http://vmunier.github.io/scalajs-simple-canvas-game/

Cheers,
Vincent

[Li Haoyi]

+1 for making games =D

[Sebastian Nozzi]

Cool :-)

Hey guys, we need a cool button "Scala.js powered" or "powered by Scala.js" or something like that...

2014-01-27 Vincent Munier <seab....@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Scala.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/scala-js/rE1pQniDDlc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to scala-js+u...@googlegroups.com.

[Sebastian Nozzi]

Another +1

I really think with Scala.js we have a huge opportunity to show how cool, fun and engaging Scala can be.

2014-01-27 Li Haoyi <haoy...@gmail.com>

[Sébastien Doeraene]

A "Powered by Scala.js" button/label would be nice :-)

Sébastien

--

[Jonas Fonseca]

OK, I hope to get started with this tonight. As for game ideas here are a few:

- Montana cabale/card game: the slightly 'boring' but easy and straightforward choice.

- Some variant of Angry Birds: potential to show how to create wrappers for Box2D.js or some other game JS engine and make something more impressive. No experience here so I don't know if it is out of scope requiring too much code.

- A tower defense game: different levels of complexity possible from predetermined paths, integration with physics engine, tower upgrade etc.

Also, it could be fun to integrate Scala.js into the theme of the game. For example, in the tower defense game the opponents could be the browser logos (IE being the slowest ;) and the towers could be X-to-JS compilers, e.g. Scala.js, Cofeescript, etc.

WDYT?

[Travis Good]

Tower defense sounds like a lot of fun! Performance wise, after trying both KineticJS and raw canvas, I've experienced the best results with PixiJS, which will use WebGL if available, then fall back to Canvas.

http://www.pixijs.com/

Here's a humble demo that works on Mobile as well as desktop browsers:

http://visualtimeline.elasticbeanstalk.com/testRig3.html

(the complete source is in the 'html' file if you 'view source.' )

Here's a link to their API documentation:

http://www.goodboydigital.com/pixijs/docs/

And here's my (currently very limited) facade on top of Pixi:

@JSName("PIXI.Stage")

class pixiStage(backgroundColor : String) extends js.Object {

  def addChild(myChild : js.Any) : Unit = ???

  

}

@JSName("PIXI.autoDetectRenderer")

class pixiAutoDetectRenderer(screenWidth : Int, screenHeight: Int) extends js.Object {

  var view : js.Any = ???

  

  def render(myStage : js.Any) : Unit = ???

}

@JSName("PIXI.Text")

class pixiText(text : String, fontStyling : js.Dictionary) extends js.Object {

  var width : Int = ???

  var height : Int = ???

  var visible : Boolean = ???

  

  var position : js.Dictionary = ???

  

  def setStyle(style : js.Dictionary) : Unit = ???

}

@JSName("PIXI.Graphics")

class pixiGraphics() extends js.Object {

  

  var alpha : Double = ???

  var position : js.Dictionary = ???

  

  def lineStyle(lineWidth : Int, color : String, alpha : Double) : Unit = ???

  def beginFill(color : String, alpha : Double) : Unit = ???

  def beginFill(color : String) : Unit = ???

  def endFill() : Unit = ???

  def drawCircle(x : Int, y: Int, radius : Int): Unit = ???

[Haoyi Li]

Here's the facades I'm using for Roll; they're pretty comprehensive, and it's not a huge amount of code, just need to go through the library's API and write them.

> Also, it could be fun to integrate Scala.js into the theme of the game. For example, in the tower defense game the opponents could be the browser logos (IE being the slowest ;) and the towers could be X-to-JS compilers, e.g. Scala.js, Cofeescript, etc.

I think at this point stuff starts getting too meta, and the people reading the tutorials would just get confused =P