Javascript technology 2016

From Rost Lab Open
(Difference between revisions)
Jump to: navigation, search
(Important Dates)
(Learning outcome)

Revision as of 04:39, 27 January 2016

Contents

Description

The anatomy of a javascript system - participating students get hands on experience with designing and building a modern javascript applications. the student will research the literature on design concepts and available technologies including the use of common JavaScript libraries. The students will prepare presentation and introduce the concepts they chose to use. Each talk is summarized by the students in a seminar thesis.

This is a completely hands-on seminar which means that you should be building your own app (no ripping off code from somewhere on the internet), prepare a presentation explaining what you did and describing the javascript concepts you were using and writing a seminar report at the end of the term.

Pre Requisites

Students are expected to have:

  • basic familiarity with Javascript
  • Basic knowledge of relational databases and NoSQL databases
  • Interest working with big data
  • Interest in the Game of Thrones show
  • Interest in challenge themselves to do something totally cool
  • participation in all meetings throughout the presentation week is mandatory. We would only consider one absence that is justified and communicated and approved well in advance.

New This Semester: The Game of Thrones Edition

(thumbnail)
New this semester: Game of Thrones meets JavaScript!

This semester students are getting a chance to build a web site and applications that use data related to the HBO show Game of Thrones. The sixth season of Game of Thrones will start in April and we hope to have our apps ready in time for the new season.

Game of Thrones is a popular HBO TV show based on George R. R. Martin's series of epic fantasy novels "A Song of Ice and Fire". The novels paint a picture of a world that blends realism with magic and mystery. Both the HBO show and the novels are extremely popular (to date the books sold over 60 million copies!) and have become a cultural phenomenon world-wide. The web is also filled with activity around the show and the books - there are currently numerous fan sites, youtube videos, review and analysis, marketing outlets, social media groups, community sites and wiki pages.

In this seminar we will tap into this wealth of knowledge and information and will build data driven applications in JavaScript that will help make sense of the Game of Thrones world.

For instance consider the following toy project - I wanted to analyze the balance of power in Westeros right around the period discussed in the "A Clash of Kings" book. To do this I had to pull data from the wiki of ice and fire -- a wiki site that acts as the most comprehensive source of information about the world of Ice and Fire. The data from the wiki helped me construct a visualization that shows a network of allegiance (appear as edges in the network) of the great houses (appear as nodes in the networks). Here is the visualization - https://rostlab.org/~gyachdav/awoiaf/#/. clicking on nodes will give you detail information and you can use the mouse wheel to zoom and navigate the network.

In the projects for this seminar you are expected to use Game of Thrones related data that you find online (the awoiaf wiki is a highly recommended source) to build and drive your apps. Remember that the apps should focus on showing (in order of importance):

  1. the concepts learned in your assigned topic
  2. how you use the data in your app.

Presentations

Presentations are due for comments 1 week before the presentation date.

The mini web app should be ready and functional at the dat of the seminar. All code should be available for other class participants to check out. You are highly encouraged to use git hub as the repository for your code.

Tips for your presentation

The presentation should:

  1. introduce to the class the javascript concept you are using in your web-app,
  2. focus on why you chose to use one technology over the other, if you tried more then one concept show the way you experimented and measured key software engineering metrics such as code performance, readability, reusability etc.
  3. while you are requested to show your work do not show us heaps of code, instead focus on the interesting parts of your code that highlight implementation decisions.
  4. A demo of the working app is required

VERY IMPORTANT INFORMATION

READ THIS PAGE: Hints and Rules for the seminar. Keep in mind that the rules on this page supersede any conflicting recommendation on the hints page.

Presentation Schedule

Group Date Time Topic Assigned to Slides Source
1 March 14 10:00 Language basics -- grammar, variables, data structures, control structures, conditionals, functions etc.
2 March 14 11:00 Object oriented javascript
3 March 14 12:00 The module pattern and AMD
4 March 15 10:00 The event handling system using using anonymous functions, callbacks, promises etc.
5 March 15 11:00 Functional reactive programming frameworks
6 March 16 10:00 Server side JavaScript with Node.js basics
7 March 16 11:00 The MEAN stack
8 March 17 10:00 Web development basics: DOM, DOM manipulation, styles
9 March 17 11:00 Web development frameworks (Angular, Backbone, React)
10 March 17 12:00 Data visualization using SVG, Canvas and framework libraries
11 March 18 10:00 Build tools, continuous integration and distribution
12 March 18 11:00 EcmaScript 6 (es6) language features

References

  1. JavaScript: The Definitive Guide, 6th Edition http://shop.oreilly.com/product/9780596805531.do
  2. (Highly recommended:) JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do
  3. http://www.htmlgoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html
  4. http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
  1. http://jquery.com
  2. http://d3js.org
  3. http://raphaeljs.com
  4. http://nodejs.org
  5. http://jqueryui.com
  6. http://www.jslint.com/lint.html
  7. http://jsfiddle.net
  8. http://www.crockford.com
  9. http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  10. Advanced Reading JavaScript Garden - the most quirky parts of the JavaScript programming language https://github.com/BonsaiDen/JavaScript-Garden/tree/master/doc/en
  11. RECOMMENDED VIDEO http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
Personal tools