มีอะไรใหม่ใน Angular เวอร์ชัน 9

ถือเป็นการอัปเดตใหญ่ของ framework ตัวนี้เลยครับ โดยเฉพาะเรื่องของประสิทธิภาพ และเครื่องมือต่างๆ มาดูกันว่ามีอะไรใหม่บ้าง

.
1. มาพร้อมกับ Ivy compiler และ Ivy runtime ตัวใหม่และกำหนดเป็น default มาให้เลย แน่นอนทำให้ app ของเรา build ได้เร็วขึ้น มีขนาดเล็กลง และรันได้เร็วขึ้นกว่าเดิม

(สำหรับ app เล็กๆ ขนาดลดลงราว 30% ส่วน app ขนาดใหญ่ ขนาดลดลงราว 25-40% เลยทีเดียว)

.
2. สำหรับคนที่เขียน unit tests ด้วย TestBed ในเวอร์ชันนี้ปรับปรุงการเขียน test ให้เร็วขึ้นกว่าเดิมราว 40% โดยที่ TestBed จะไม่ recomplie components ใหม่ทั้งหมดเหมือนเวอร์ชันเดิมครับ

.
3. ต้องใช้ TypeScript เวอร์ชัน 3.6 ขึ้นไป (ถ้าอัปเดตจะได้ 3.7 มาอยู่แล้วครับ)

.
4. เอาคลาส Renderer ออกแล้วให้ใช้ Renderer2 แทน
คลาส RenderComponentType แก้เป็น RendererType2
ส่วน RootRenderer แก้เป็น RendererFactory2

.
5. เอาคำสั่ง <ngForm></ngForm> ออกแล้วนะครับ ให้ใช้ <ng-form></ng-form> แทนได้เลย

.
6. การอัปเดต แนะนำให้อัปเดตเป็นเวอร์ชัน 8 ก่อนนะครับ ค่อยมาเป็นเวอร์ชัน 9 ดูการอัปเดตได้ที่นี่ => https://update.angular.io/

.
ส่วนใหญ่ในเวอร์ชันนี้จะเน้นปรับปรุงที่ตัว compiler และ runtime ครับ แต่ก็มีอีกหลายอย่าง ตามไปอ่านได้ที่ blog ของ Angular ได้ที่นี่ครับ => http://bit.ly/372zyw3

.
โค้ชเอก

สรุปพื้นฐานภาษา Dart ก่อนเขียน Flutter

สำหรับคนที่อยากพัฒนา Mobile App หรือ Web App ด้วย Flutter สิ่งแรกที่ต้องทำคือ การศึกษาภาษา Dart ครับ

.
ภาษา Dart เป็นภาษาแบบ Object-Oriented รองรับทั้ง JIT (Just In Time) และ AOT (Ahead of Time) สำหรับคนที่เคยเขียนภาษาที่เป็น OOP มาก่อน จะทำให้การศึกษาภาษา Dart รวดเร็วยิ่งขึ้นครับ เช่น เคยเขียนภาษา JAVA หรือ C# เป็นต้น และแน่นอนภาษา Dart เป็นภาษาแบบ strongly typed (ต้องระบุชนิดข้อมูล แต่ก็รองรับ dynamic types ด้วยนะครับ ถ้าเราจะเลือกใช้)

สำหรับคนที่เคยเขียนภาษาที่เป็น dynamic types มาก่อน เช่น Ruby, Python หรือ JavaScript อาจจะต้องปรับตัวกันนิดนึงครับ 

.
วันนี้ผมจะลองสรุปพื้นฐานภาษา Dart แบบสั้นๆ ให้อ่านกันนะครับ เผื่อใครสนใจเขียน Flutter ทั้งแบบ Mobile และ Web App มาเริ่มกันเลย!

.
1. ตัวอย่างการประกาศตัวแปรรูปแบบต่างๆ

String name; // หากไม่กำหนดค่าเริ่มต้นให้กับตัวแปร จะมีค่า default เป็น null ครับ (null ใน dart จะเป็น objects)

int age;

double num2 = 10.50;

List<String> names; // List คือ arrays ในภาษาอื่นๆ

Map<String, int> products;

int three = null;

const String fullname= 'Akenarin';

var message = 'Hello'; // ประกาศตัวแปรโดยไม่ต้องระบุ type

dynamic myVar = "Hello"; // ตัวแปร myVar เป็นแบบ
dynamic types สามารถกำหนดค่าได้ทุกชนิดข้อมูล

final name = 'Bob';

.
2. ตัวอย่างการเขียนฟังก์ชัน การเขียนฟังก์ชันในภาษา Dart ต้องใส่ return type ด้วยนะครับ (รวมถึง argument) เช่น

int addNums(int x, int y) {
return x + y;
}

หรือ
String makeGreeting(String name) {
return 'Hello, $name';
}

.
3. การ comments โค้ด รองรับ 3 แบบ ดังนี้

// In-line comments

/*
Blocks of comments.
*/

/// Documentation
///
/// สำหรับเขียนเอกสารคู่มือ

.
4. การใช้งาน Operators คล้ายกันกับภาษาอื่นๆ เช่น การบวก ลบ คูณ หาร ( + , – , * , /) จะมีแตกต่างบ้าง เช่น

เครื่องหมาย ~/ คือ เมื่อหารกันแล้วจะปัดเศษผลลัพธ์เป็นจำนวนเต็มที่ใกล้เคียงที่สุด เช่น 5 ~/ 2 จะเท่ากับ 2

as เอาไว้สำหรับทำ typecasts

is และ is! สำหรับตรวจสอบว่า 2 objects มี type เดียวกันหรือไม่ (จะใช้ == หรือ != ก็ได้)

.
5. คำสั่งต่างๆ เกี่ยวกับการจัดการค่า null จะทำให้เราเขียนโค้ดสั้นลง คือไม่ต้องเขียนแบบนี้แล้ว
if (user != null) {
this.userAge = user.age;
}

.
5.1 เครื่องหมาย ?? สำหรับตรวจสอบว่าเป็นค่า null หรือไม่ ถ้าเป็น null ให้ใช้ค่า default แทน (คือ ตัวเลข 20)

this.userAge = user.age ?? 20;

.
5.2 เครื่องหมาย ?. สำหรับตรวจสอบว่าเป็นค่า null หรือไม่ ถ้ามีข้อมูลให้แสดงค่าของฟิลด์นั้นออกมา (ฟิลด์ age) แต่ถ้าเป็น null ก็จะไม่มี error อะไร

this.userAge = user?.age;

.
5.3 เครื่องหมาย ??= สำหรับตรวจสอบว่าเป็น null หรือไม่ ถ้าเป็น null ให้กำหนดค่าเป็นเลข 3 แทน ถ้าไม่เป็น null ก็ทำงานตามปกติ เช่น

int x;
x ??= 3;
print(x); //ผลลัพธ์ คือ 3 เพราะ x เป็น null

.
6. การเขียน if และ else เขียนแบบปกติได้เลยครับ เช่น

if (inBangkok && isSummer) {
print('The weather is amazing! 55');
} else if(inBangkok && isAnyOtherSeason) {
print('Torrential downpour.');
} else {
print ('Check the weather!');
}

.
7. การเขียน if แบบย่อ (ternary operator) ก็มีนะครับ คล้ายกันกับภาษาอื่นๆ

String loginStatus = user.isLogin == true ? 'success' : 'error';

.
8. การเขียน Loops ก็จะคล้ายกับภาษาอื่นๆ เช่นมี for, while, do while เป็นต้น ขอยกตัวอย่าง for-in ดังนี้

// for-in
var pets = ['OO', 'Duck', 'Yelly'];
for (var pet in pets) {
print(pet);
}

.
9. การนำ strings มาต่อหรือเชื่อมกัน (concatenate strings) ทำได้ดังนี้

String a = 'Bob';
String b = 'b';

var c1 = a + b; // ใช้เครื่อง +

var c2 = 'Hello $a and $b'; // ใช้ string interpolation (เครื่องหมาย $)

var c3 = 'a' 'b' 'c'; // ใช้การเว้นวรรคระหว่าง strings จะทำการต่อหรือเชื่อมอัตโนมัติ

var c4 = '${user.name}'; // ถ้าเป็น instance ให้ใส่ {} ครอบด้วย

.
10. การสร้าง string แบบหลายบรรทัด ให้ใช้ triple quote (พิมพ์ quote 3 ตัวติดกัน) หรือ double quotation marks (ฟันหนู 3 ตัวติดกัน) มาครอบ string ไว้ เช่น

var s1 = '''
บรรทัดที่ 1
บรรทัดที่ 2
บรรทัดที่ 3
''';

.
สำหรับคนที่อยากเขียน Flutter ก็ลองศึกษาภาษา Dart เพิ่มเติมได้นะครับ ที่เว็บ => https://dart.dev/

.
หรือถ้าใครอยากทดลองเขียนโดยไม่ต้องติดตั้ง ก็ไปที่เว็บ => https://dartpad.dev/

.
ลองศึกษาดูนะครับ
โค้ชเอก

มีอะไรใหม่ใน Flutter 1.9.1

1. มาพร้อมกับ Dart เวอร์ชัน 2.5 ล่าสุด ซึ่งมี features ใหม่ๆ เช่น การใช้ machine learning สำหรับ code completions และ มี Foreign Function Interface (FFI) ทำให้เราสามารถเรียกใช้งานภาษา C โดยตรงจาก Dart ได้เลย

.
2. รองรับ macOS Catalina, Xcode 11 และ iOS 13 ที่กำลังจะออกตัวจริงเร็วๆนี้

.
3. Flutter สำหรับเว็บถูกรวมและเป็นส่วนหนึ่งของ repo หลักแล้ว ทำให้เราสามารถเขียน flutter ได้ทั้ง mobile, desktop และ web โดยใช้โค้ดเพียงชุดเดียว

.
4. มี Material widgets ตัวใหม่ ได้แก่ ToggleButtons และ ColorFiltered

.
5. รองรับภาษาใหม่เพิ่มเข้ามาอีก 24 ภาษา

.
6. ในเวอร์ชันนี้เวลาสร้างโปรเจคใหม่ default สำหรับ iOS จะใช้ Swift แทน Objective-C และใช้ Kotlin แทน Java สำหรับโปรเจค Android เรียบร้อยแล้ว (แต่ยังสามารถสลับกลับมาเป็นแบบเดิมได้อยู่)

.
7. ปรับปรุง error messages ให้อ่าน และเข้าใจง่ายขึ้น

.
ใครที่ใช้อยู่ก็สามารถดูฟีเจอร์ใหม่ๆ ทั้งหมดได้ที่ => http://bit.ly/2mjAIll

.
ก็ถือว่าเป็นการเปลี่ยนแปลงครั้งสำคัญอีกก้าวหนึ่ง ของ Flutter เลยครับ เป็นการเตรียมพร้อม และรองรับอะไรใหม่ๆ ในอนาคตที่กำลังจะออกมา

.
ลองดูนะครับ
โค้ชเอก

มีอะไรใหม่ใน Laravel เวอร์ชัน 6.0

1. ต้องใช้ PHP เวอร์ชัน 7.2.0 ขึ้นไป

.
2. มีการแยกงาน frontend scaffolding ออกจาก framework หลักแล้วนะครับ ถ้าใครต้องการ ui สำเร็จรูป และระบบล็อกอินสำเร็จรูปต้องติดตั้ง package ชื่อว่า laravel/ui แทน

ด้วยคำสั่ง composer require laravel/ui

ยกตัวอย่างเช่น ถ้าผมต้องการใช้ vue.js และระบบล็อกอินสำเร็จรูป (เป็น Bootstrap 4)

ก็ใช้คำสั่ง php artisan ui vue –auth เป็นต้น

ณ ตอนนี้ หากเราติดตั้ง Laravel 6 ใหม่จะไม่มีส่วนนี้ติดมาให้แล้วนะครับ

.
3. ปรับปรุง Eloquent Subquery ให้เขียนง่ายขึ้นภายในคำสั่งเดียว

.
4. ปรับปรุง Authorization Responses เพื่อให้สามารถแจ้งข้อความแก่ผู้ใช้ได้ง่ายขึ้น (ใช้เมธอด Gate::inspect)

.
5. เพิ่มคลาส LazyCollection สำหรับทำงานกับ datasets ที่มีขนาดใหญ่ ทำให้ใช้ memory น้อยลง (โหลดทีละ query ด้วย method ที่ชื่อว่า cursor())

.
6. มีการนำเอา String และ Array Helpers ออกจาก framework หลักแล้วนะครับ ใครที่ใช้ helpers สองตัวนี้อยู่ก็ให้ลงเพิ่ม ด้วยคำสั่ง composer require laravel/helpers

.
7. นำเอาคำสั่ง Input::get ออกแล้ว ก็ให้ใช้ Request::input แทน

.
8. รองรับ Laravel Vapor ซึ่งเป็น serverless deployment platform ใหม่ที่ผู้สร้าง Laravel ทำขึ้นมา สะดวกมากหากใครไม่อยากทำ Server เอง

.
9. เวอร์ชันนี้จะเป็นเวอร์ชัน LTS ครับ support ยาวจนถึงปี 2022

.
10. มาพร้อมกับโลโก้ และเว็บไซต์ ใหม่ 🙂

.
ขอสรุปสั้นๆ แค่นี้ก่อนแล้วกันนะครับ ใครสนใจก็ไปอ่านเพิ่มเติมได้ที่ => http://bit.ly/2KUmVeG

.
ลองดูครับ 🙂
โค้ชเอก

มีอะไรใหม่ใน React 16.9.0

มาดูกันว่า React เวอร์ชันนี้ มีอะไรน่าสนใจบ้าง 🙂

.
1. กำลังจะยกเลิกคำสั่ง javascript: ที่เราใส่ใน href ของ tag <a></a> ครับ เพราะอาจเสี่ยงต่อการถูกโจมตีและความปลอดภัย (cross-site scripting) หากใครอัปเดตเวอร์ชันนี้จะมี warning ออกมาครับ อนาคตจะเอาออกแล้ว แน่นอนจะมี error แสดงเลย หากใครต้องการใช้อยู่ก็แนะนำให้ใช้ dangerouslySetInnerHTML แทนนะ

ดูเพิ่มเติมได้ที่ => http://bit.ly/2N0pJsc

.
2. ในอนาคต (เวอร์ชัน 17) จะมีการนำ lifecycle methods ออกไปทั้งหมด 3 methods ได้แก่ componentWillMount, componentWillReceiveProps, componentWillUpdate แล้วนะครับ

ถ้าในเวอร์ชันนี้ (16.9.0) ก็ยังใช้ได้แต่จะมีการแจ้งเตือนออกมา (warning) เค้าแนะนำให้เราเติมคำว่า UNSAFE_ เข้าไปด้านหน้าชื่อ methods ครับหากใครยังใช้อยู่

แต่ถ้าโปรเจคใหญ่จะมานั่งแก้เองคงไม่ไหว ก็แนะนำให้ติดตั้ง “codemod” ได้เลยครับ ด้วยคำสั่ง

npx react-codemod rename-unsafe-lifecycles

เดี๋ยวมันจัดการ rename ให้เราเอง

.
3. สามารถใช้ Profiler API สำหรับวัดประสิทธิภาพของ Web App ด้วยการเขียนโค้ดได้แล้วนะครับ (ปกติจะใช้ React DevTools) โดยต้องระบุ id และเขียน callback ที่ onRender เพื่อรับข้อมูลด้านประสิทธิภาพต่างๆ ได้

ดูเพิ่มเติมได้ที่ => http://bit.ly/2H5hzuV

.
4. ทำให้ฟังก์ชัน ReactTestUtils.act() สามารถใช้งานแบบ Asynchronous ได้ สำหรับใครที่เขียน test อยู่ก็ลองดูได้ครับ

.
อื่นๆ ลองตามไปอ่านได้ที่ blog ได้เลย => http://bit.ly/31yHnHB

.
จริงๆ แล้วใน React เวอร์ชัน 16 นี้มี features เพิ่มเข้ามาหลายอย่างครับ ไม่ว่าจะเป็น Hooks, context API, การทำ lazy loading ด้วย Suspense เป็นต้น ใครยังไม่ได้ลอง แนะนำให้ลองเอามาใช้ดูครับ

.
สุดท้ายใครอยากอัปเดตก็ง่ายๆ ครับ ลุยได้เลย

npm install –save react@^16.9.0 react-dom@^16.9.0

หรือ

yarn add react@^16.9.0 react-dom@^16.9.0

.
ลองดูนะครับ
โค้ชเอก

Ionic Framework 4 รองรับ Angular 8 แล้ว

ตอนนี้ Ionic Framework 4 รองรับ Angular 8 แล้วนะครับ!

ถ้าอยากรู้ว่า Angular 8 มีอะไรใหม่ๆ บ้างก็อ่านได้ที่นี่ => http://bit.ly/2GBHquc

โค้ดที่เปลี่ยนหลักๆ จะเป็นในส่วนของ lazy-loading ครับ ใครอัปเกรดก็อย่าลืมแก้กันด้วยนะ

.
ใครที่ใช้ Ionic 4 + Angular 7 อยู่ ก็ตามไปดูการอัปเกรดเป็น Angular 8 กันได้ที่ => http://bit.ly/2KcG36g

.
สำหรับคนที่รอคอร์สออนไลน์อยู่ ตอนนี้กำลังจัดทำอยู่นะครับ (อัปเดต Ionic 4 + Angular 8) น่าจะออกมาให้เรียนกันอย่างช้าไม่เกินสัปดาห์หน้านี้

.
ลองดูครับ
โค้ชเอก

ศึกษา React ลองดูชีทสรุปเรียงตามนี้

สำหรับคนที่เพิ่งเริ่มต้นศึกษา React ลองดูชีทสรุปเรียงตามนี้นะครับ จะทำให้เห็นภาพรวมของ JavaScript ES6+, React และ Redux ได้เป็นอย่างดี จะได้ดูด้วยว่าเราศึกษามาถูกทางหรือเข้าใจอย่างดีแล้วหรือไม่ ลองดูครับ 

.
1. JavaScript ES6+ => https://devhints.io/es6

2. React => https://devhints.io/react

3. React และ React Redux => https://devhints.io/redux

.
อ้อ อีกอันนึงคือ patterns การเขียน React ครับ ลองเช็คดูซิว่าเราเคยเขียนหรือยังไม่เคย patterns ไหนบ้าง ดูได้ที่ => https://reactpatterns.com

.
โค้ชเอก

มีอะไรใหม่ใน React Native เวอร์ชัน 0.60

1. รองรับ AndroidX ซึ่งถือเป็นการเปลี่ยนแปลงครั้งใหญ่ของ React Native เลยครับ จะทำให้ Library ภายนอกที่เราใช้อยู่และยังไม่ได้เขียนรองรับ AndroidX จะไม่สามารถงานได้ และทำให้เกิด error ตอน build เพราะฉะนั้นก่อนอัปเกรดควรเช็คก่อนว่า Library ภายนอกที่เราใช้อยู่ migrated และรองรับ AndroidX แล้วหรือยัง ถ้ายังก็คงต้องรอสักพักให้ Library ต่างๆ อัปเดตก่อน หรือใครอยากจะลองแก้เองก็ได้

.
2. ในเวอร์ชันนี้ ต่อไปทุกคนไม่ต้องสั่ง react native link แล้วนะครับ ตัว CLI จะทำการ auto link ให้เลย สำหรับคนที่จะอัปเกรดมาเวอร์ชันนี้ก็แนะนำให้ react native unlink ก่อน ค่อยอัปเกรด ไม่งั้นเดี๋ยวจะซ้ำ และเกิด error ได้

.
3. มีการนำเอา NetInfo, WebView และ Geolocation ออกจาก Core หลักแล้วนะครับ ใคร import แบบเดิมอยู่ ก็ให้เปลี่ยนไปติดตั้งแยก และใช้ Repo ของตัวนั้นได้เลย แล้วค่อย import เข้ามาใช้งานตามปกติ

.
4. เพิ่มตัวช่วยในการอัปเกรดเวอร์ชันของ React Native (Upgrade Helper) สะดวกมา ดูได้ที่นี่ครับ => http://bit.ly/2Ss6nx2

.
5. เปลี่ยนหน้า Intro screen (หน้าแรกตอนติดตั้งครั้งแรก) ใหม่ (ตามรูป)

.
6. ใช้ React เวอร์ชัน 16.8.6 ล่าสุด

.
7. ตั้งแต่เวอร์ชัน 0.60.2 ขึ้นไป จะรองรับ Hermes ซึ่งเป็น open-source JavaScript engine จะทำให้ การรัน React Native ตอนเริ่มต้นเร็วขึ้น (start-up time) ใช้หน่วยความจำได้ดีขึ้น และ App ของเรามีขนาดเล็กลง! ใครสนใจอยากลองเปิดใช้งานตัวนี้ ดูได้ที่นี่ครับ => http://bit.ly/2NX3N3k

.
*ข้อแนะนำ หากใครอยากลองอัปเกรดเวอร์ชันนี้ย้ำอีกรอบอย่าลืม backup โปรเจคเดิมก่อนนะครับ และตรวจสอบการรองรับ AndroidX ของ Library เดิมก่อน อีกข้อคืออย่าลืม unlink ด้วยนะ

.
อ่านเพิ่มเติมได้ที่ => http://bit.ly/2XKVMDf

.
ลองดูครับ
โค้ชเอก

เส้นทางการเรียนรู้ของ React, Vue.js และ Angular

การมองเห็นภาพใหญ่ก่อนจะลงมือศึกษาเรื่องต่างๆ เป็นสิ่งสำคัญนะครับ วันนี้เลยเอาเส้นทางการเรียนรู้ของ React, Vue.js และ Angular มาฝาก จะได้รู้ว่าปัจจุบันนี้เค้าใช้เครื่องมือ หรือไลบรารีอะไรกันอยู่บ้าง

ให้สังเกตตัวที่เป็นสีเหลืองนะ ที่จะต้องรู้และทำให้ได้ ลองดูครับ

.
React => http://bit.ly/2X9uxgA

.
Vue.js => http://bit.ly/2XdKcQP

.
Angular => http://bit.ly/2Xh2OQ1

.
โค้ชเอก

config NGINX แบบสำเร็จรูป

สำหรับคนที่เพิ่งเริ่มศึกษา และใช้งาน NGINX ทำเป็น Web Server อยู่ อาจจะยังไม่คล่องในการ conifg ค่าต่างๆ มากนัก

.
แนะนำเว็บนี้เลยนะครับ จะช่วยให้เรา config NGINX ได้ง่ายมากๆ โดยที่เค้าจะสร้างไฟล์ config สำเร็จรูปให้เราเลย เพียงแค่เรา คลิกเลือก เท่านั้น (แต่ต้องเข้าใจด้วยนะ ฮ่าๆ)

.
รายละเอียด: https://nginxconfig.io/

ลองดูๆ 🙂

โค้ชเอก