JSFoo 2016

Tackling speed and performance for JavaScript

About JSFoo

JSFoo is India’s premier JavaScript conference. We launched JSFoo in 2011 as India’s first JavaScript conference. The JS community in India has grown phenomenally since. JavaScript now pervades every aspect of web development – browsers, apps, front-end, backend, mobile, and IoT.

JSFoo 2016: Theme

Over the last few years, JavaScript has evolved to become the centerpiece of a complex web stack. Today, it is a prime subject of the obsession that lies with performance and speed. How can you get pages to load faster? How do you work with browser constraints to enhance speed? How do you measure performance? What actually is performance? In what ways do faster response times influence your architecture choices and plans? How is this new focus on faster page loads and apps working offline influencing the development of front-ends and backends as well as server side JS?

The theme for the 2016 edition is tackling speed and performance for JavaScript.

We are inviting full talks (40 mins), crisp talks (15 mins + 5 mins Q&A), and 3-6 hour long (hands-on) workshops from practitioners on the overall theme of speed and performance, including the following topics:

  • Architecting for performance – case studies on how you got faster response times
  • Best practices: debugging and profiling on the web, measuring performance
  • Handling large volumes of data in the browser
  • Building and deploying web apps eg webpack, travis
  • Modern web technology: Angular 2, React
  • Universal JavaScript: meteor js
  • Progressive Web Apps
  • JS off the web – raspberry pi, IoT
  • The cutting edge: elm

This year, JSFoo will feature two days of talks on JavaScript (15-16 September) and a single day of talks on design (17 September) at Meta Refresh (call for proposals will open shortly).

Guidelines for submission

Every proposal MUST be accompanied by:

  • A three minute preview video where the proposer gives an elevator pitch about the talk.
  • Detailed outline of the talk – either in the form of draft slides, mind map and/or textual description.
  • If you are proposing to speak on a topic where the code is not open-sourced yet, the editorial panel will consider your proposal only if the code is made open-source at least three weeks before the conference.

Without the above information, your proposal will not be considered for review.

If you are submitting a Workshop Proposal, you must clearly state:

  • Background knowledge that participants must possess in order to attend your workshop.
  • Details and links to software / packages which participants must install before coming to the workshop.
  • Laptop configuration.
  • Links to background reading material and GitHub repos.
  • Duration of the workshop.
  • Maximum number of participants who can attend your workshop.
  • Instructor’s past experience with conducting workshops.

There is only one speaker per session. Workshops can have two or more instructors.

Entry is free for selected speakers.

Due to budgetary constraints, we prefer speakers closer to home. But if we think you stand out, we’ll provide a grant to cover part of your travel and accommodation to Bangalore. Grants are limited and are made available to speakers delivering full sessions (40 minutes or longer) only.

Commitment to open source

HasGeek believes in open source as the binding force of our community. If you are describing a codebase for developers to work with, we’d like for it to be available under a permissive open source licence. If your software is commercially licensed or available under a combination of commercial and restrictive open source licences (such as the various forms of the GPL), please consider picking up a sponsorship. We recognise that there are valid reasons for commercial licensing, but ask that you support us in return for giving you an audience. Your session will be marked on the schedule as a sponsored session.

Important dates:

Deadline for submitting proposals: 29 August 2015
Conference dates: 15-16 September

Venue

JSFoo will be held at the MLR Convention Centre, J P Nagar.

Contact

For more information about speaking proposals, tickets and sponsorships, contact info@hasgeek.com or call +91-7676332020.

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

Ayan Ghatak

@ayanghatak

Visualising large volumes of data in the browser

Submitted Aug 14, 2016

With the rapid growth in data, it turns very important to visualise them to get the inferences. Web, being the most commonly used platform, this talk is on how to work with large data in browsers. We’ll talk about the common experiences we encounter on attempting to do so. Firstly we’ll try to manage the data points effectively using data aggregation or over-plotting reduction.We will see what are the problems those are yet to be addressed even after the above operations. How to render the entire large data without a script error along with smooth interaction? Is SVG an option for it or does canvas stands better at it? What are the limit for canvas, and can we strech it? The talk explains what is batch rendering and how it helps in enhanching the performance with a live illustration.But using canvas comes at a cost of interaction support. We’ll see how to mock browser events algorithimically. And thereby, introducing kd-tree, explaining the benifits and discussing its performance limitations. It continues on how improving the tree-building implementaion provided that extra-edge. Discussing the boost recieved and trade-offs considered while designing the modified kd-tree version. Lastly, the 9-grid pre-rendering algortihim will be discussed to attain an effective zooming and panning user interface with live illustrations.

Outline

  • Working with large data
    • Growing size of the data
    • Need for visualising it.
    • Web - the ubiquitous platform
  • Common experiences
    • Crashing of browsers
    • Script time-out error
    • Taking hours to render
    • Over-plotting of data
    • Issues with interactions
  • Managing data points effectively
    • Data aggregation
      • What is data aggregation?
      • How it solves the issue?
    • Over-plotting reduction
      • Culling the coincident data plots
      • How it solves the issue?
  • A part of the problem is yet to be addressed
    • Data aggregation vs. actual data
    • At times. coincident rendering is essential!
  • Rendering the entire large data
    • Without getting a script error / time lag
    • With smooth interaction post rendering
  • Is SVG an option for it?
    • Live demo
    • Comparison of the rendering time vs DOM element counts
    • Analysis of the performance
  • Is canvas an option for it?
    • Live demo
    • Comparison of the rendering time vs. number of data points rendered
    • Analysis of the performance
    • Performance comparison between SVG and canvas
  • How far can you go with canvas?
    • Threshold of performance in canvas rendering
    • Factors behind the observed limitation
    • Can we stretch the limit?
  • Batch rendering
    • What is batch rendering?
      • Divide the entire data in smaller chunks.
      • Render them individually instead of the whole at a single go
    • Live Demo
    • How it helped in pushing the limit?
  • Interactive issues with canvas
    • No interactivity support
    • Mocking browser events algorithmically
  • kd-tree
    • What is kd-tree?
    • Benefits of using kd-tree
    • Performance limitations
  • Modified kd-tree
    • Modifications in the kd-tree
    • Benefits of this modification
    • Trade-off
  • Progressive rendering
    • Why progressive rendering is required wrt zooming and panning ?
    • 9-grid algorithm
    • Live Demo
  • Final Thoughts
    • A peek into FusionCharts zoom scatter chart
    • Say YES to large data visualisation in browsers.

Requirements

Basic understanding of Javascript.

Speaker bio

I am a Javascript developer, currently working at FusionCharts. I have deep love for writing JS codes, especially in VanillaJS. I am always keen to learn and improve myself. Apart from them I love robotics and trying out small stuffs using my Arduino.

StackOverflow: http://stackoverflow.com/users/5102631/ayan
GitHub: https://github.com/AyanGhatak
LinkedIn: https://in.linkedin.com/in/ayanghatak

Slides

https://docs.google.com/presentation/d/1YAFPUWvGoOjPEd9X6jtAni6MgviqTj18qOcA4i9OnpM

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more