JSFoo 2019

Annual conference of 800+ front-end, backend and fullstack engineers

Participate

WebAssembly with JavaScript to build Web-Components - the future of the web?

Submitted by ranadeep bhuyan (@ranadeepbhuyan) on Friday, 24 May 2019


Preview video

Section: Workshop Technical level: Intermediate

Abstract

This workshop will teach and show how to develop heavy client applications in a scalable and performant manner. Process heavy application those are mostly desktop applications can be ported to the web to run on a browser thus avoiding installation, patching and maintenance over head.

The demo and case study will show how to modify a large system software that was built using low level languages such as C/C++ or dotNet and run them in browser using JavaScript and web-assembly then publish them as web-components.

WebAssembly Leverages the underlying native hardware such as PE and memory to scale efficiently. We will learn about Web Assembly which is a bytecode specification for writing performant, browser agnostic web components. It is a new cross-browser, portable assembly and binary format for web application.

WebAssembly is not very new idea, it was just not the right time to evolve it when it was conceptualized. Now the time has come that web community could leverage modern browser platforms to all compiled codes that belongs to a different type of byte code

Key Takeaways, why should you attend

  • Learn uses case where to use web-assembly with JavaScript
  • Learn how webassembly will impact web development in near future
  • Challanges with desktop application and porting them to online
  • Hands-on and functional knowledge of web-assembly
  • The dare to move large applications online
  • Best practices: Security and performance in regrards to w3c specs
  • Learn to work with Emscripten with some advance features such as call WA api from JS and vice versa

Outline

Outline of the workshoop

  • Quick introduction on WebAssembly
  • Web Assembly over JavaScript
    • Benefits
    • Challenges
  • Using in web-components (instead of React/Dojo)
    • Simple demo WebAssembly app
    • Table View
  • Debugging in developer tool
    • Growing memory
  • Cool stuffs in WebAssembly
    • Whole of AutoCAD runs of browser
    • Loading MS word editor in native mode and same the document
  • Intuit’s (QBO) use case
  • Future of WebAssembly (examples)
    • Run distributed code on visitors browser
    • Ethical Mining

Duration

4 to 5 hours with couple of short breaks

Requirements

Background Knowledge required

  • JavaScript
  • Nice to have some idea of functional programming
  • Basic understanding of computer programming/languages

Who should attend

  • Developers/Architects who want to learn with a deep dive into wsm with some hands on webassembly and Emscripten
    • WebComponent developers who want to do magic with lowlevel C/C++ code in browsers
    • Engineering leaders, Tech leads who are maintaining any large system software with a pain of releasing new features and want to explore an option of moving to cloud
  • Product managers who want to go online from desktop

What is not covered

  • Attendence can come up with their systems with build environments, but we will stick to one or two such pre determined softwares.
  • We will show how to start and move forward with a large software build system step by step - 4 hours is not enough to solve the entier system to convert into web-assembly. We will try to complete one or two end to end use cases.

System requirement

Laptop with latest Chrome
nodeJS
dot net runtime

Speaker bio

Ranadeep is a full stack engineer at Intuit. He contributes to design, development and architecture of solutions for complex engineering problems for QuickBooks and it’s customers.

https://ranadeepbhuyan.wordpress.com

https://github.com/ranadeepbhuyan

QuickBooks Engineering blog

Links

Slides

https://github.com/ranadeepbhuyan/emsdk-samples/wiki

Preview video

https://youtu.be/WpCJ4LPZAao

Comments

  • Abhishek Balaji (@booleanbalaji) Reviewer 29 days ago

    Hi Ranadeep,

    Thanks for submitting a proposal. Should we consider this as a workshop?

    • ranadeep bhuyan (@ranadeepbhuyan) Proposer 26 days ago (edited 24 days ago)

      Hi Abhishek,
      This is a proposal for workshop, I have edited the proposal.

  • Zainab Bawa (@zainabbawa) Reviewer 28 days ago

    Ranadeep, this being a workshop proposal, modufy the proposal to include the following details:

    1. Duration of the workshop. If you are unsure about the exact duration, you can speculatively put it down as either 4 hours or 6 hours for now.
    2. Background knowledge required to participate in the workshop. What concepts/technologies should participants be familiar with in order to attend the workshop.
    3. Target audience: who should attend the workshop? Specify personas rather than mentioning beginner or advanced level audiences. Ensure that the workshop caters to one specific audience segment only.
    4. Who should NOT attend this workshop.
    5. Why attend this workshop? What will participants learn from attending this workshop? How will they benefit?
    6. Detailed workshop plan. Give us a break-up of the different sections of the workshop and what content will be covered in each section.
    7. Requirements. What software and other tech should participants install on their laptops before coming to this workshop? Should participants carry laptops with specific configurations on their machines?
      The above details should be added to this proposal within a week so that we can review the details and close on the decision.
    • ranadeep bhuyan (@ranadeepbhuyan) Proposer 26 days ago

      Hi Zainab,

      I have updated the proposal according to your feedback!
      Thanks,
      Rana

Login with Twitter or Google to leave a comment