Quantcast
Channel: cc :: somkiat
Viewing all articles
Browse latest Browse all 1997

Flutter สามารถ run บน Web browser ได้แล้ว

$
0
0



https://developers.googleblog.com/2019/05/Flutter-io19.html

จากงาน Google IO 2019 นั้นทางฝั่งของ project Flutter ก็ออก feature มาขายด้วย
นั่นก็คือ

มันทำให้เราสามารถพัฒนาระบบด้วย Flutter ซึ่งเขียนด้วยภาษา Dart นั้น
ไป run บน platform ต่าง ๆ ได้เลย
ทั้ง Mobile (Android และ iOS), web browser, embedded device และ desktop มันคือ Multi-platform นั่นเอง 
เขียน code ชุดเดียวได้ครบเลย (ไม่ทุกเรื่องนะ)

แต่ตัวที่ผมสนใจคือ Flutter for Web 

ดังนั้นมาดูกันหน่อยว่าเป็นอย่างไรบ้าง ?

มันคือความพยายามที่จะทำการ implement ส่วนการ render

ด้วย web technology ทั้ง HTML, CSS และ JavaScript
นั่นหมายความว่า เราสามารถเขียน code ด้วยภาษา Dart และ library/dependency เหมือนเดิม
แต่ flutter จะทำการ compile ไปตามเป้าหมายที่ต้องการ
ที่สำคัญไม่ต้องทำการติดตั้ง plugin ใด ๆ บน web browser เพื่อใช้งานอีกด้วย

โดย project นี้อยู่ในช่วง Technical Preview เท่านั้นเอง

นั่นคือเป็นการลองทำขึ้นมา เพื่อ proof-of-concept
ด้วยการ fork code ของ Flutter มาพัฒนาต่อยอด
อยู่ที่ GitHub:: Flutter Web

มีโครงสร้างดังรูป

เนื่องจากเป็นเพียงการเริ่มต้นเท่านั้น
ดังนั้นพวก library ต่าง ๆ ไม่ได้ถูกเพิ่มเข้ามาใน Flutter เลย
เรื่อง performance ไม่ต้องพูดถึง
รวมทั้งเรื่อง workflow การทำงานต่าง ๆ จะอยู่บน Chrome เท่านั้น

มาลองเล่นกันหน่อย

ทำการ clone หรือ download มาจาก GitHub:: Flutter Web
จากนั้นลอง build ดูได้เลยดังนี้

ทำการติดตั้ง web dev package ก่อนเลย

[code] $flutter packages pub global activate webdev [/code]

ทำการ build ให้ครบ

[code] $git clone https://github.com/flutter/flutter_web.git $cd flutter_web $cd examples/hello_world/ $flutter packages upgrade $pub get [/code]

ถ้าผ่านแล้วก็ทำการ run web server ด้วยคำสั่ง

[code] $webdev serve [INFO] Serving `web` on http://localhost:8080 [INFO] Running build completed, took 13.6s [INFO] Caching finalized dependency graph completed, took 131ms [INFO] Succeeded after 13.7s with 548 outputs (3169 actions) [/code]

ลองเปิด http://localhost:8080  ที่ Web Browser  
จะแสดงผลดังนี้


ปล. ไม่สนับสนุน IE นะเออ
ลองดูครับ ถ้าเอาไปรวมกับ Flutter แล้วน่าจะสนใจมากขึ้น


Viewing all articles
Browse latest Browse all 1997

Trending Articles