YWC Programmer Meetup #3

JAVASCRIPT ไง จะใครหละ

https://www.facebook.com/events/1803123656584906/

Secure API in Javascript

  • Trend SPA (single page application)
  • Restful API ถูกใช้งานมากขึ้น

API ที่ดีควรเป็นยังไง

  • ระวัง REST…

จะป้องกันได้ดีต้องรู้ว่า Hacker จะทำอะไร ?

Vulnerability = ความสามารถในการโจมตี

Search google ไปว่า “Top 10 owasp”

Hack ที่ Input

A1: Injection

  • Validate Input ทั้ง JS และ API
  • sign request ด้วย
  • อย่าต่อ string SQL เอง

A5: Security Miss Config

  • ไม่อนุญาต HTTP ปกติ
  • ใช้ Crypto Key ให้ยาวพอ และต่างกัน
Hack ที่ Process

A2: Broken Session & Authen

  • ใช้ Access Token / JWT
  • อย่าเอา Access Token ใส่ใน URL
  • ตรวจ Login User ใน Non-Public API (set default ให้เข้าไม่ได้ จะใช้ค่อยเปิด)

A7: Missing Function LAC

  • ซ่อนปุ่ม / เมนู ไม่พอ ต้องซ่อน API
  • ตรวจ ACL ทุกการเรียก API

A8: CSRF ***

ต้องมีอะไรบางอย่างที่มันอยู่ที่ URL ไม่ได้
  • ทด CSRF_Token ไว้ในใจ
  • เรียก GET เมื่อไหร่ ส่งใจมาด้วย

A3: XSS

  • คิดไว้เสมอว่า Data ไม่ Clean
  • ฆ่าเชื้อก่อนใช้ด้วย html_entity

A6: Sensitive Data Exposure

  • อย่าใช้ black list → เขียนไว้เฉพาะสิ่งที่อยากให้เห็น ปิดประตูก่อน แล้วค่อยเปิดให้เห็น
  • อย่าส่ง id จริง ไปกับ response และ ใช้ hash id

Rich Test Editor (storylog)

WYSIWS = what you see is what you get

  • lib ต่างๆ ทั้งที่มีใช้ใน wordpress
  • Content editable

ปัญหามากมายที่พบ ไม่ว่าจะ บน browser แสดงผลคนละ tag เมื่อใช้ contenteditable นอกจากนี้ยังมีเรื่องการ replace ตัวหนา เอียงต่างๆ เวลา edit

ปัจจุบันเลยเปลี่ยนเป็น Draft.js + ReactJS

Draft.js แปลงทุกอย่าง ให้เป็น state

ปัญหา copy จาก word แล้ว style ไม่ตรง พอมาดูจริงๆ clipboard เป็น html ก็เลยนำมาแปลงเป็น state แล้วโยนกลับเป็น array

Other

  • Set style
  • Save to internal storage
  • Save draft to server
  • Go to Mobile

Riot JS in Production

ต้องตอบให้ได้ก่อนเวลาจะใช้ Framework / library สักตัว

Why use riot ?

(Vue vs Angular vs Ember vs React)

Lib vs Micro Lib มีข้อดีต่างกัน

บางครั้งทั้ง lib เราไม่ได้ใช้ทั้งหมด

import { createStore } from ‘redux’

เดียวนี้เลือก import บางส่วนได้ ไม่ต้องเอามาทีเดียวทั้งหมด

frontend is better with less code → filesize → …

micro lib has small set of features but enough for the work

are you loding the whole moment.js and using 2 functions ?

moment.min.js ~ 57.3 KB
Riot.js ~ 20.8 KB

Are micro libraries reliable ?

จริงๆ riot มี star บน github เยอะ

the good / bad parts

ข้อดี

  • scope css และ ใช้ scss ได้
  • <script type=”babel”>

ข้อเสีย

many ways to mount
  • riot.mount(‘*’) ทำให้เกิด tag ที่ไม่ได้ใช้ บางทีมันไม่มี style แต่มันสะดวกตรงที่ตั้งเองได้
  • riot.mount(‘.class’, ‘tag’, {}) → เราต้องมา unmount เอง ถ้า mount ไว้เฉยๆ จะเกิด memleak ได้
  • moreclean but sending… many data ? selector._tag
npm install -g riot

ใช้งาน riot กับ grunt, gulp, webpeck ได้

webpack ต้อง set presets เอง

https://gist.github.com/zugarzeeker/a7cd280099c945cb46c8003c360ae8ae

Javascript with progressive web app

Web ใกล้เคียง App มากขึ้น จึงมีการนำมาทำเป็น App

Progressive Web Apps is

  • Progressive
  • Responsive
  • Connectivity independent
  • App-like
  • Fresh
  • Safe
  • Discoverable
  • Re-engageable
  • Installable
  • Linkable

Progressive Web App is next for mobile

app ใช้งานน้อยลง ถ้าเปิดผ่าน browser แล้วปิดไปได้คงดี

Javascript

  • ServiceWorker
  • Blutooth API
  • Payment API
  • Credential API
  • etc.

ServiceWorker

เขียน script ตัวนึงแล้วฝังไปใน browser เมื่อหน้าเว็บปิดไปก็ยังทำงานอยู่ แยกตัวเป็นอิสระจากหน้าเว็บ ต้องส่ง Message ไปบอก

  • Offline (Caching Asset)
  • Push
  • Backgound Sync

เริ่มต้น register ServiceWorker

Offline

  • สามารถสั่งได้ว่าจะ cache ชิ้นไหนบ้าง
  • Mobile first = Offline first
  • sw-toolbox → lib ที่เอาไว้ทำ OfflineCache ด้วย ServiceWorker

Push

https://onesignal.com → ทำ Notification ง่าย

Background Sync

หน้าเว็บปิดไป แล้วให้ดึงข้อมูลได้

Mole Fetch​

https://www.npmjs.com/package/mole-fetch

save ลง cache เมื่อโดนปิด

เมื่อเปิดก็ส่งข้อมูลมาได้

fetch เมื่อ กลับมาต่อเน็ตอีกครั้งได้

ถ้าเน็ตโดนตัดเอาจาก cache ถ้าต่อเน็ตได้เอาจาก server

React Native in Production at Takemetour

Javascript → Native Application

ใช้ภาษาเดียวทำให้ทีมหลากหลายมากขึ้น “Javascript”

Concept of React

  • fn(state) → html
  • Declarative UI
  • Virtual DOM

React Native vs Ionic / Cordova

  • Hot Reloading → true false
  • Code Push → true true
  • View Engine → Native Components WebView
  • Memory Usag → Moderate High
Not a WebView, never a WebView

React native vs Native

Code Sharing → true false

ทำให้เขียนคนเดียวแล้ว Run App แบบ Native

Web Development

with hot-reloading

มีหลาย Component ที่เอามาใช้ด้วยกันได้ ทั้ง iOS, Android

Deco IDE ลากวางใส่ Component ได้

Javascript ปรับอีกนิด ให้เว็บของคุณไวขึ้น

Dek-D writer

Remove from MS-Word

  • line height
  • Base64 image
  • Background

UX & UI

ประมวลผลด้วย Javascript แทน

ลด Request Javascript

ถ้า script มีไม่เยอะมากใช้ inline แทนก็ดี

ตำแหน่งของ Javscirpt

Javascript แก้ Runder Blocking CSS

  • เข้าเว็บแล้วหน้าขาวค้างหลายวินาที เกิดจากโหลด CSS ไม่เสร็จ และ เอา CSS ไว้ที่ head

Download Slide : https://goo.gl/S0FWv2

From no test to know test

สมัยก่อน BRD → Dev → Test → Dev → Test (Repeat)

Start with tools

  • Javascript Test Framework (Mocha)
  • Assertion Library (Chai)
  • Http mocking and expectations library (Nock)
  • Standalone test spies, stubs and mocks for JS. No dependencies. Works with any unit testing framework. (Sinon)

What Next

  • TDD
  • Test is Document
One of my most productive days was throwing away 1000 lines of code
by Ken Thompsan

Test Pyramid

  • Unit 70 %, Integration 20%, Acceptance 10 %
  • Acceptance นานมากกกก

Why fail in automate test

  • Dirty Hybrid ระหว่าง Unit tests และ Integration tests (ไม่แยกกันชัดเจน)

Rules of economy

  • Programmer time is expensive
  • conserve it in preference in machine

What is useful

  • Test is document
  • Easy to refactor code
  • Easy to add new feature
  • Easy to find a bug
  • Easy to code review
  • Sleep well :) :) :)
  • and more
Push code without test is like having sex test protection
by Chonlatee Jumratsee
Most good programmers do programming not because they expect to get paid or get adultation by the public, but because it is fun to program.
linus torvalds

I don’t know Javascript

Thath Zocial — Buy a wonderful tools at a fair price

Javascript ใช้เวลา 10 วัน Design ขึ้นมา

Let’s talk about Number

1 + 2 == 3 → true

0.1 + 0.2 ==0.3 → false

7 < 8 < 9 → true

3 > 2 > 1 → false

Let’s talk about Array and Object

[] == [] → false

[] == ![] → true

[] + [] → ‘’

[] + {} → [object Object]

{} + [] → 0 // zero

{} + {} → [object Object][object Object]

arr = [‘10’, ‘10’, ‘10’]

arr.map(parseInt) → [10, Nan, 2]

Let’s write Javascript

All of these make sense in javascript

Avoiding Callback Hell in Javascript

Using Koa.js

What is a callback function ?

  • function ที่ส่งค่าไปเพื่อรอค่าที่ทำงานเสร็จ
  • เวลาใช้งาน ก็รับ callback แล้วเอามาเรียก callback function ใน callback function ของคนอื่นอีกที

การทำงาน

  • แบบ Linear = function1 → function2 → function3
  • แบบ Dependencies = รอหลายๆที่
  • Modularize แบ่งโค้ดออกมา แต่ละส่วน แตกเป็น function ย่อยๆ

Libary async

https://github.com/caolan/async

  • async.waterfall → Code ที่มีการเรียกใช้ตามลำดับ
  • async.auto → Code ที่มี Dependencies เยอะๆ
  • async.each
  • async.series
  • async.parallel
  • async.map
  • async.filter
  • async.every
  • async.queue
  • morethen 60 functions

Promise

  • resolve และ reject
  • then และ catch
  • Linear → run().then(process1).then(process2).catch(callback)
  • bludbird เป็น module ของ promise แทน Promise Nativeได้ → ใช้ promise
https://gist.github.com/zugarzeeker/b8b1b368423fb8019315298c78c672bf

Generators

  • function* () {…}
  • yield fs.readFile(‘aaa.txt’)
https://gist.github.com/zugarzeeker/b07c49f911601517314854c94bd76a07

Why must be Koa ?

  • doest not include any middleware
  • Routing is not provided
  • Many convenience utilities are not provided
  • Koa is more modular
  • Better UX
  • No “Callback”
  • Less hackery
That’s mean Koa is very lean
Show your support

Clapping shows how much you appreciated Supanut Apikulvanich’s story.