Difference between revisions of "Javascript technology 2018"

From Rost Lab Open
Jump to: navigation, search
(Important Dates)
(Important Dates)
Line 19: Line 19:
* '''Pre-meeting''': Feb. 2nd@11:00-12:00. Room number [https://portal.mytum.de/campus/roomfinder/roomfinder_viewmap?mapid=106&roomid=01.10.011@5610 01.10.011]
* '''Pre-meeting''': Feb. 2nd@11:00-12:00. Room number [https://portal.mytum.de/campus/roomfinder/roomfinder_viewmap?mapid=106&roomid=01.10.011@5610 01.10.011]
* '''Kick off meeting''': Feb 23rd 10:30-12:30
* '''Kick off meeting''': Feb 23rd 10:30-13:00. Room number 01.09.034
* '''Coding period begins:''' Feb 26th
* '''Coding period begins:''' Feb 26th
* '''Feature freeze:''' Fri, March ,30th 23:24:25
* '''Feature freeze:''' Fri, March ,30th 23:24:25

Revision as of 23:25, 17 February 2018



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

This is a completely hands-on seminar which means that you should be building your own app, prepare a presentation that explains what you did and describes the JavaScript concepts you were using. Finally, the entire work will be summarized in a seminar report at the end of the term.

The students will be working in a highly agile environment, meaning that a collaborative work (communication!!) among all students will be essential for the successful completion of the project. Any results thus provided during the coding period of the seminar will need to be communicated and made available to peer coders asap!

Registration: Prior to registration on TUM Matching System, we would like to get to know you! Please send us an email to jstech@rostlab.org and tell us about yourself a bit: your current current degree, program (e.g. informatics) and explain why you want to join the seminar, what prior course work you have. Also please name a TUM faculty member as a reference. Without this information we won't be able to secure a spot for you at the seminar.

Project Description: This semester we will be building a system that can translate natural language directives to graphing commands. Our prototype will receive a set of commands in English and will automatically generate visualizations to a given dataset. The system will then use additional commands (again written in English) to manipulate and modify the graphical objects. The system will be a first step in designing and building a graphing tool used by professionals who have no expertise in data visualization for their every day business needs. For instance, our system will know how to ingest a dataset from an HR system and show the distribution of employees’ demographics just by taking an input directive such as “plot a histogram of employees age”. The project was conceived and will be accompanied by our collaborators at the Advanced Business Analytics unit at Allianz SE.

Tutors: Dr. Guy Yachdav, Dr. Cheng Guo (Allianz, NLP expert) Dr. Tatyana Goldberg (Allianz, coordinator)

Important Dates

  • Pre-meeting: Feb. 2nd@11:00-12:00. Room number 01.10.011
  • Kick off meeting: Feb 23rd 10:30-13:00. Room number 01.09.034
  • Coding period begins: Feb 26th
  • Feature freeze: Fri, March ,30th 23:24:25
  • Beta release:Fri, April 6th, 22:23:24
  • Release (hopefully): April 10th, 21:22:23
  • Presentations week (in class, participation mandatory):
    • Wednesday, March 21st: 10:00 - 12:30: 01.10.011
    • Thursday, March 22nd: 10:00 - 12:00: 01.10.011
    • Friday, March 23rd: 10:00 - 12:00: 01.10.011

Pre Requisites

Students are expected to have:

  • Basic familiarity with JavaScript
  • Knowledge in at least one functional OR Object Oriented Programming language
  • Basic knowledge of relational databases and NoSQL databases
  • Interest working with big data
  • Interest in challenging 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, documented and approved well in advance.


Checklist to pass the seminar

  1. Register on TUM Matching System for this seminar
  2. Each group will be assigned one topic and one project to present in the presentation week. Please see the guidelines for topic and project presentations below.
  3. The slides for your topic presentation and the preliminary visualization of your project results are due for comments 1 week before the presentation date. Send your drafts to presentations to jstech@rostlab.org.
  4. Make sure to read these Hints and Rules for great presentations
  5. Submit a 5 pages long report (one per group) describing solutions to your topic (4 pages) and the project (1 page). Due: 2 weeks after the seminar.

Topic presentation

We prepared 6-10 different topics about JavaScript technology for this seminar. These will be assigned to groups of 2-3 people. The students are welcome to divide the work within their team as they wish.

Presentation Themes

Theme 1

Title: Continuous Integration and Testing with JavaScript

Description: This topic is all about the software development cycle with JavaScript. Starting with behaviour driven development and unit testing (e.g. with Mocha), we then take a look at larger-scale integration testing and especially continuous integration strategies (e.g. with Travis). To finish the testing cycle, we take a look at system and deployment testing (e.g. with Docker).

Theme 2

Title: JavaScript on the server. A Node.js crash course

Description: JavaScript’s not only a browser language. In this talk, we give a brief intro to the server side application development with Node.js. We’ll talk about the Node eco- and buildsystem (e.g. npm, gulp, webpack) and some commonly used frameworks for Node.js web development (e.g. Express.js, Mojito, Hapi, etc.). We’ll also give an overview of the event model and the event loop Node uses to serve mans concurrent users. (Check topic 2 to not have any overlaps)

Theme 3

Title: Data Driven Documents: Data visualization using D3.js

Description: In this topic, we take a look at the most popular data visualization library for JavaScript: D3.js. We’ll first take a look at what Data Driven Documents are, why and how to use them. This is a very visual topic, so apart from the concept, there will be a focus on the look & feel of D3. Also present a few alternatives that are better or worse than D3 to see what to use in your own projects in the future.

Theme 4

Title: RESTful APIs with the JavaScript Object Notation

Description: JavaScript also introduces one of the most used data exchange formats: JSON. JSON is commonly used to communicate between client and server, utilising the Facade Pattern. We’ll give a rationale, what a RESTful API is and where it is used. Then we’ll take a look at the various JavaScript frameworks to create, document and maintain those APIs (e.g. LoopBack, restify, swagger etc.). We will try to present the various pitfalls when it comes to versioning, maintaining and acceptance of RESTful APIs.

Theme 5

Title: The Storage Question: To SQL or NoSQL?

Description: In a data driven application, one key question is where to persist the data. In the JavaScript world, there are a lot of possible storage concepts: relational, filesystem based, document stores, key-value stores, graph databases and others. Not every type of data fits each database. In this topic, we’ll take a look into the differences and when to use which. Especially what the differences between session and local storage is and when to use cookies. In addition we will see how WebSQL and Sequilize impact the current development of Javascript applications. Finally, we will see if and how we can handle big data with Javascript tools in the frontend as well as in the backend.

Theme 6

Title: People are reactive, why shouldn’t our apps be

Description: Reactive programming is a new paradigm on top of “classical” promises. Each user interaction, network communication and elemental influence can be seen as a stream of events. Smart minds are suggesting that reactive programming might be the solution to problems in UI programming. We will see if reactive programming and the various Rx* frameworks actually solve problems or introduce too many complexities to the already complicated Javascript world.

Presentation Schedule

Group Date Time Theme


Recommended literature

  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://nodejs.org
  4. http://jqueryui.com
  5. http://www.jslint.com/lint.html
  6. http://jsfiddle.net
  7. http://www.crockford.com
  8. http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  9. http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/
  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/