Skip to content

Instantly share code, notes, and snippets.

@lyqht

lyqht/DevFest 2019.md

Last active December 11, 2019 08:18
Show Gist options
  • Save lyqht/dc9796fd5150869587f4a99b122daa0b to your computer and use it in GitHub Desktop.
Save lyqht/dc9796fd5150869587f4a99b122daa0b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DevFest 2019.md

DevFest 2019

Event details: Organized by GDG Singapore on Nov 30 2019. Website on the event here.

All speaker slides: https://drive.google.com/drive/folders/17JvMdd7sPvrAi_f-qRyfQrFQItWSEJxu?usp=sharing

Table of Contents

Web Performance Journey

Talk given by Arwa Lokhandwala, Full Stack Developer @ Telstra

"If you can't measure it, you can't improve it"

Tools for Performance

  • Lighthouse
  • WebPageTest
  • Chrome Dev Tools

Metrics

  1. First Contentful Paint: Just something that user sees e.g. Loading
  2. First Meaningful Paint: Speed of primary content
    1. Differ from browser to browser, app to app
    2. Display of results relevant to what users are seeking
  3. Time to Interaction: Exactly what u think it is

Optimization

  • Design pattern by GoogleL: PRPL:
    • Preload
    • Render Critical First
    • Precache
    • Lazy Load

Preload

But don't preload everything! If everything is important, nothing is important

  • Fonts should be preloaded to avoid:
    • FOIT: Flash of invisible Text
    • FOUT: Flash of Unstyled Text
<link rel="preload" href="/fonts/someFont.woff" as="font">
  • Critical CSS should be preloaded and should be <14KB.
<link rel="preload" href="main.css" as="style">
  • Critical JS should be preloaded
    • Split JS into small bundles
    • After preload only critical S, refer or async the remaining bundles
    • Use module bundlers like Webpack e.g. `preload-webpakc-plugin

Render

  1. Inlining Critical CSS /JS
    • But too much u bang ur head
  2. Server Side Rendering

Precache

  • Involves caching all resources especially the static resources using service workers.
    • Service workers request from server then store cache storage, then if the browser needs a resource, it goes to the cache storage and return it.
    • Analogy: Want food just take from fridge and not go to the supermarket
  • Tool to configure service worker: Workbox & Webpack

Lazy Loading

Native lazy-loading with chrome

<img src="devFestSG.jpg" loading="lazy" />

  • For other browsers, we can apply native lazy-loading with Fallback. We can first check if loading element is present in HTMLmageElement.prototype, first if not present then import the other lazy loading libraries.

  • We can also switch to Brotli Compression

  • Be smart about your 3rd party libraries.

    • defer loading if not required upon initial load
    • Keep libraries updated with latest version
    • Use tree shakable modules
import foo from "module/foo"

//not this
import {foo} from "module"

❔ Q&A

Q. What about JS Injection ?

A. Perform domain check via Nginx so that attacks cannot be performed on the server itself.

Machine Learning on the Web

Talk by Galuh Sahid

Slides: https://speakerdeck.com/galuhsahid/devfest-machine-learning-on-the-web Code: https://github.com/galuhsahid/ml-on-the-web

The code included many apps she made featuring ml5.js. Be sure to check it out!

Libraries

Tensorflow.js

  • WebGL accelerated JS library
    • uses the browser's GPU
  • Don't need installation on client side
  • Integrates w nodejs stack on server

ml5.js

  • Don't need to deal with tensors directly
  • Just use a function and pass in the input and the model that you want then it will do the work. Input can be any media type. It can even be navigator.mediaDevices.getUserMedia()
  • But if you want you can still redefine the model, in a syntax very similar to tensorflow
  • Can perform sound/image/video classification etc e.g. CNN Small Footprint

Model

  • Make your own model: https://teachablemachine.withgoogle.com
  • Pretrained models
    • MobileNet: Mobile-First Computer Vision Model
    • Diff models trained on diff datasets
    • Can be retrained. But dont feed 14 million pics to it. Since the model already know how to identify features of the image, it just don't know how to apply its knowledge to new images. So we just use transfer learning.

IoT Data Analytics

IoT Core -> Monitoring Tab, then can also use Data Studio to make reports automatically

Kotlin Native vs React Native

Talk by Kyrmyzy Kaliyeva

Kotlin Native React Native
Learning Curve Lower Learning Curve:
Kotlin/Swift, iOS/Android		 Higher learning curve:
JS, React, Redux + Kotlin Native stuff
Update Ease Very easy Difficult, some libraries will not be compatible anymore
Community Support More Less since it's newer, but Java ppl can migrate over easily

Conclusion: Kotlin Native better if you starting out from scratch, and allows for a more stable app

React Native Conception

  • JS ↔️ Android/iOS
  • Single Thread ↔️ Main UI Thread + Other BG Threads
    • React Native cannot handle push notifications. Since the notifications are handled in dif way in different platforms.

Kotlin Multiplatform

  • Backend ↔️ Android/IOS
  • What is common:
    • Data Models, Data Storage, Business Logic, API Calls

Building a Serverless Social Wall with Firebase and GCP

Talk by Lim Shang Yi

Code

MVP for Social Wall

  • In real-time, without redeployment
    • Update posts
    • change hastags
    • change heading
    • change quantity of lanes (Screen Resolution)
  • Implemenetation Design:
    • Traditional: Frontend + App Server (API+Backend+DB)
    • With Firebase: Replace the entire Application Server with Firebase Firestore + Cloud Functions & Scheduler, and Frontend can be hosted on Firebase.

Why Severless and why not

Pros

  • No need to manage infrastructure
  • Focus more on features
    • Don't need to think about websocket layers etc
  • Faster deliverability
  • Pay only for what you run
  • Reliable and Secure
    • Live in the GCP environment

Cons

  • No intuitive way to handle environment variables
  • Cold start issues for Cloud Functions
    • Firebase re-provision may have delay
    • Can keep it alive by starting it up randomly when not in use
  • Limited location in SEA
  • Location performance
    • Firestore and Firebase Storage may be located geographically different, so may have delay
  • Infinite loops
    • If you declare a cloud function that always does something upon adding a new document
  • Performance bombs: Kaching byebye
    • To prevent this, don't blindly do GET request, do snapshot which helps to retrieve data once and cache it.

Deep Dive in ARCore's new features

Talk by Kai Zhou

I Like frontend more than backend since i can see what im doing more XD

Process of AR

  1. Recognize image
  2. provide 6DOF Pose
  3. Overlay Content

This year improvements to ARCore Augmented Image

  • Improved tracking precision and detection recall (regain tracking when image goes out/in of screen)
  • Can now track multiple images
  • Can track moving images (30Hz of image pose)

How to choose images

  • Arcoreimg tool to get a quality score >75
  • don't do heavy compression
  • min 300x300 resolution
  • distinct, non-repetitive features

Practices for onboarding users to the AR app

  • Have an animated bracket and text UI

Augmented Faces

  • App + ARCore = Sceneform
  • Textures can be 2D/3D

Environmental HDR

  • Limited dynamic range & limited field of view in mobile camera
  • HDR lighting crucial for realistic rendering
  • Neural Network Model is possible by taking 50 mil images that have balls of different refractive index to obtain combined information of direction + ambience etc

When you don't know how to solve a problem, just do machine learning

Tensorflow.js on Flutter

Talk by Sam Witteven from Red Dragon AI

Why Flutter

  • UI as code: Widget Tree
  • Dart
    • replace JS and can compile to JS
    • similar to Typescript
    • Created by Google 2011

Showcased Project

  1. Make tf model for the data
  2. export that model to tf lite
  3. Flutter app
    1. drawing canvas -> Takes touch input (GestureDetector)
    2. convert canvas to image -> resize pixels in image to fit the model (28x28)
    3. loading tf
    4. process the image
    5. make a prediction
    6. show the prediction
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment