Modern Web Bay March - Machine Learning, Angular, Tensorflow.js, and JavaScript!

Alex Eagle, State of Javascript build tooling: layering
Speaker - Simeon Vincent

Title: Evolving the Chrome Extensions Platform

Description: Chances are you that you’ve installed for your browser. If you’ve done so in the past few years, extension is probably based on Chromium’s current extensions platform, Manifest V2. The Chromium believes the Manifest V2 platform has a number of issues with respect to privacy, security, performance and ergonomics and plans to address these issues by evolving the platform with Manifest V3. In this session we’ll dive into some of the biggest issues with the Manifest V2 platform, where we’d like the platform to be, and how Manifest V3 will help us get there.

Speaker - Aaron Ma

Title - Machine Learning in The Browser (Angular + TensorFlow.js)

Description: More and more apps need machine learning. In this 20 minute session, you’ll gain hands-on experience with machine learning and create an amazing TensorFlow.js powered app trained in your very own browser.

Speaker - Alex Eagle

Title: State of JavaScript build tooling: layering

Description: Each bundler, test runner, and devserver is forced to grow a complete ecosystem of plugins to support the tools you need to transform your source files into a running application. This results in a governance problem: who maintains the complete build toolchain when an army of volunteers writes the plugins? It also inhibits innovation, since any new language/feature needs a plugin for each tool and any new tool needs plugins for every language/feature. Alex will talk about our plans to use Bazel as a build orchestrator to decouple tools from the toolchain.

07:00 Alex Eagle/ State of Javascript build tooling: Layering

  • user facing: webpack, ng, parcel, gulp
  • lang: tsc, less, saccs, postcss
  • Matrix shape -> needs O(m*n)
    • row: workflow tools
    • column: language tools
    • cells: plugins
  • what’s wrong?
    • missing plugins, so many changes for bugs/
    • plugins call internal apis internal apis in the tools
  • governance
    • so many plugins, licenses, authors
    • who supports the end-to-end?
  • Wheel shape
    • perimeter: all tools
    • hub: generac build orchestrations tool
    • spokes: plugins
    • number of plugins needs is O(M+N)
  • The wheel model allows good layering
    • tools don’t need to know about each other
    • we run the supported CLI of each tool
  • Remember Gulp? or Grunt?
    • those folllowed the wheel model
  • What was wrong with Gulp?
    • error handling for failed builds
    • easy to make incorrect build, need to clean
    • node streams: probably wrong abstraction
  • Wrong abstracction?
  • Am I selling something?
    • BAZEL {fast, correct}
  • @jakeherringbone
  • http://g.co/ng/abc

0717 Simeon Vincent / Seeking Balance In Manifest V3

  • @dotproto
  • google chrome extension team made a significant change
  • pretty big change
  • History of browsers
    • 1995 Netscape Navigator 2.0
    • 1997 Internet Explorer 4.
    • 2004 Firefox 1.0
    • 2008 Chrome
  • Netscape Navigator 2.0
    • NPAPI, handled ontent types, Arbitary binaries in a child process
  • IE 4+
    • COM based, dll loaded
    • context menus, explorer bars, browser helper objects, toolbars,
  • Firefox 1.0
    • Add-ons not extensions
    • written with XUL and XPCOM, jetpack, arbitary binaries in a child process
  • Chrome(v1)
    • Webby, Stable, Secure
    • Built with a web tech(HTML, CSS, JS)
    • break away from native APIs
  • Chrome(MV2) manifest V2
    • mostly tweaks and cleanup
    • CSP(Content security policy) added
      • can be overridden
    • Extension resources have to be exposed by the extension
      • add a new manifest entry
  • Limitation of MV2
    • not enough focus on usability
    • is too common
    • remote code == unknown effect
    • powerful api are your only option
    • extension can tank performance
    • not enough user control
  • Improvoing MV2
    • out of process iframes
    • remove inline install
  • MV3 Goals
    • security
      • improve security guarantees
      • increase user trust & confidence
    • privacy
      • give users more control
      • encourage devs to use in-context permissions
    • performance
      • performant by default
      • minimize overhead of extensions over their lifetime
  • webRequest & declarativeNetRequest
    • changes
      • dnr doesn’t need host perms
      • remove blocking webRequest*
  • Challenges
    • can’t do everything WR can
  • Service Workers
    • Changes
      • replaces background pages
      • similar to event pages
    • Challenges
      • No DOM
      • No persistent global state
  • RHC(Remotely Hosted Code)
    • Changes
      • can’t eval()
      • can’t inject code content scripts
      • improved review, user trust
    • Challenges
      • limit dynamism
  • Chromium extension google group: http://bit.ly/crx-gg
  • V3 manifest: http://bit.ly/mv3designdoc

0740 Aaron Ma/ Machine Learning in The Browser (Angular + TensorFlow.js)

  • 5th grader, @@aaronhma
  • GAN(Generative Adversarial Network)
  • What are AI, ML, Deep Learning
  • tensorflow.js -> webgl accelerated
    • window.tf
  • Tensor: matrix
  • https://stackblitz.com/edit/angular-tensors
  • Adam optimizer
  • celcius to farenhieght
  • Demo #1: Digit Classifier
    • use pre-trained TF cnn.h5 model
    • https://aaronhma.github.io/tfjs-digital-classifier
    • app.component.ts
    • await tf.loadLayersModel('assets/cnn/h5')
  • Demo #2: Emotion Detector
    • face-api.js
    • https://aaronhma.github.io/tfjs-face-expression/
    • await faceapi.nets/tinyFaceDetector.load('assets/weights')
  • Next steps
    • https://www.tensorflow.org/js/demos
    • https://github.com/tensorflow/tfjs-examples
    • awesome tensorflow: https://github.com/jtoy/awesome-tensorflow
  • slide: https://bit.ly/2HPIHPE
COMMENTS
Related Post