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
- Machine Learning on the Web
- IoT Data Analytics
- Kotlin Native vs React Native
- Building a Serverless Social Wall with Firebase and GCP
- Deep Dive in ARCore's new features
- Tensorflow.js on Flutter
Talk given by Arwa Lokhandwala, Full Stack Developer @ Telstra
"If you can't measure it, you can't improve it"
- Lighthouse
- WebPageTest
- Chrome Dev Tools
- First Contentful Paint: Just something that user sees e.g. Loading
- First Meaningful Paint: Speed of primary content
- Differ from browser to browser, app to app
- Display of results relevant to what users are seeking
- Time to Interaction: Exactly what u think it is
- Design pattern by GoogleL: PRPL:
- Preload
- Render Critical First
- Precache
- Lazy Load
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
- Inlining Critical CSS /JS
- But too much u bang ur head
- Server Side Rendering
- 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
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. What about JS Injection ?
A. Perform domain check via Nginx so that attacks cannot be performed on the server itself.
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!
- WebGL accelerated JS library
- uses the browser's GPU
- Don't need installation on client side
- Integrates w nodejs stack on server
- 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
- 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 Core -> Monitoring Tab, then can also use Data Studio to make reports automatically
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
Talk by Lim Shang Yi
Code
- 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.
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.
Talk by Kai Zhou
I Like frontend more than backend since i can see what im doing more XD
Process of AR
- Recognize image
- provide 6DOF Pose
- 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
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
- Make tf model for the data
- export that model to tf lite
- Flutter app
- drawing canvas -> Takes touch input (GestureDetector)
- convert canvas to image -> resize pixels in image to fit the model (28x28)
- loading tf
- process the image
- make a prediction
- show the prediction