What’s new for developers in Visual Studio 2013


เมื่อวันที่ 26 พฤศจิกายน 2556 ไมโครซอฟต์ได้จัดงาน Microsoft TechDays Thailand 2013
ได้เปิดตัว>

  • Windows Server 2012 R2,
  • System Center 2012 R2,
  • Windows 8.1 Enterprise,
  • Windows Azure และ
  • Visual Studio 2013

ณ ห้องบอลรูม โรงแรมแชงกรีลา บางรัก กรุงเทพฯ


 

ผมได้รับเกียรติจาก ไมโครซอฟท์
ให้บรรยายหัวข้อ
What’s new for developers in Visual Studio 2013
ไปดู Slide และ Script ที่บรรยาย
ดังนี้:


 

ไปดูหัวข้อ
จะเริ่มต้นด้วย ฟีเจอร์ Connected IDE
ต่อด้วยเรื่องของ Theme
และที่เป็นหัวใจของ เซสชั่นนี้คือ

Editor productivity features

ที่ให้ประสบการณ์ที่ดี ในการเขียนโค้ด กับนักพัฒนา
หลังจากนั้น ไปจะพูดคุยเกี่ยวกับบางส่วน ของ Performance tools & debugging
และต่อด้วยหัวข้อ การปรับปรุง Visual Studio 2013 ใน .NET Framework 4.5.1

สุดท้ายจะจบด้วย การสร้าง
Mobile Web Business Application ด้วย LightSwitch html


 

Connected IDE
เมื่อคุณติดตั้ง Visual Studio เสร็จ
คุณเปิด Visual Studio ครั้งแรก
คุณจะเห็นหน้าต่าง ให้ Sign in เข้าสู่ระบบด้วย
Microsoft account เช่น
    @hotmail.com,
    @Live.com,
    @outlook.com

ซึ่งการทำงานของ connected IDE นั้น
หลังจากที่คุณลงชื่อเข้าใช้งาน Visual Studio
การตั้งค่าของคุณจะ ซิงโครไนส์ กับ Microsoft account โดยอัตโนมัติ
ซึ่ง Profile ของคุณ จะถูกเก็บไว้บน cloud และครั้งต่อไป
เมื่อคุณไปใช้ Visual Studio 2013 บนเครื่องอื่น ด้วย account นั้น
การตั้งค่าของคุณ เช่น Theme, Font,
จะ Sync มาโดยอัตโนมัติ
ทำให้ IDE พร้อมใช้งานได้ทันที


 

ในสไลด์นี้
จะไปดูในส่วนของ ฟีเจอร์ themes
ซึ่งก่อนหน้านี้ Visual Studio 2012
มีให้เลือก เพียง 2 Theme คือ

  • Light และ
  • Dark

แต่หนึ่งในการร้องขอ ของนักพัฒนาคือ
ขอให้เพิ่ม Them สีน้ำเงิน เนื่องจากนักพัฒนาหลายท่าน ยังหลงใหลใน VS2010 อยู่
ต่อมาไมโครซอฟต์ ได้ปรับปรุงให้ทันทีใน
Visual Studio 2012 Update 2
และตอนนี้ ใน Visual Studio 2013
ไมโครซอฟท์ใส่มาให้แล้ว
คุณสามารถใช้งานได้ทันที


 

ไปดูตัวอย่าง


1. เปิด VS2013

2. สังเกตุบนมุมขวา ของ IDE จะเห็นเมนู Sign in

3. คลิกเมนู Sign in
ถ้าเครื่องคุณออนไลน์อยู่ คุณจะเห็นหน้าจอให้ Sign in
ผมใช้ outlook.com

4. Sign in เรียบร้อย
มันจะ Sync Profile IDE ของคุณลงมา
ทำให้ IDE ของคุณ พร้อมใช้งานทันที่

5. เมนู Feedback
ไมโครซอฟท์ ได้ใส่เมนู Feedback ลงบน IDE
ทำให้นักพัฒนา สามารถส่ง Feedback ถึงไมโครซอฟท์ ทันที เช่

  • ถ้าคุณเจอสิ่งที่ชอบใจ คุณส่งรอยยิ้มไป
  • ถ้าคุณเจอสิ่งไม่ถูกใจ คุณส่งหน้าบึ้งไป
  • หรือคุณสามารถไปตั้งกระทู้ ได้ทันที ผ่านเมนู MSDN Forums
  • หรือคุณเจอบั๊กคุณสามารถส่งบั๊กถึง ไมโครซอฟท์ ทันที

 

กลับไปที่สใลด์
เรื่องที่ถือเป็นหัวใจ ของเซสซั่นนี้
ไปดูบางฟีเจอร์ใหม่ ที่ช่วยเพิ่ม productivity
เมื่อทำงานใน Visual Studio editor
รุ่น Visual Studio ก่อนหน้านี้
เราเห็นตัวอย่างค่อนข้างน้อย เกี่ยวกับ เอดิเตอร์ โปรดักทิวีตี้
เอดิเตอร์ โปรดักทิวีตี้ ถูกโฟกัสเป็นหลักสำหรับ Visual Studio 2013
โดยผมจะยก เอดิเตอร์ โปรดักทิวีตี้ หลักๆ 3 ฟีเจอร์นี้มาพูด

  • Enhanced scrollbar
  • Peek Definition
  • CodeLens

เดี๋ยวเราจะไปดู ทีละฟีเจอร์ ว่ามันคืออะไร?


ความแตกต่างของฟีเจอร์แรก และมองเห็นได้ชัดมากที่สุด ฟีเจอร์หนึ่ง
ใน Visual Studio 2013 คือ Enhanced Scrollbar
ถ้าไฟล์โค้ดของคุณมีขนาดใหญ่
ฟีเจอร์นี้ จะช่วยให้คุณ ดูโค้ดส่วนอื่นๆ ได้อย่างง่ายดาย
โดยที่คุณไม่ต้องออกจาก หน้าต่าง ที่คุณกำลังเขียนโค้ด
เมื่อคุณมีการแก้ไขโค้ด
    คุณจะเห็นเครื่องหมาย สีเหลืองปรากฏ
        เพื่อให้คุณทราบว่ามีการแก้ไข ได้เกิดขึ้น
    หากมีข้อผิดพลาด คุณจะเห็นเครื่องหมาย สีแดงปรากฏ
        คุณจะเห็นทันทีว่า ณ จุดใหนของซอร์สโค้ด มีปัญหา


มันมีสองโหมดคือ

  1. Bar mode
  2. Map mode


 

CodeLens คืออะไร?
CodeLens จะคล้ายกับ หน้าปัดรถยนต์
หน้าปัดรถยนต์ จะเป็นตัวบอกให้คุณรู้ว่า

ก่อนคุณสตาร์ทรถ

  • สภาพเครื่องยนต์ ปกติ หรือไม่
  • ระดับน้ำมัน เหลือเท่าไหร่
  • ถุงลมนิรภัย ปกติหรือไม่
  • คุณรัดเข็มขัดหรือยัง
  • ประตู ปิดแน่น ไม่แน่น

เมื่อคุณออกวิ่ง

มันจะรายงาน ข้อมูลให้คุณทราบ

  • คุณวิ่งความเร็ว เท่าไหร่
  • ความร้อนของเครื่องยนต์ ปกติใหม
  • ถึงเวลาที่คุณจะต้องเติมน้ำมันหรือยัง
  • โดยหน้าปัดนั้น จะเป็นรายงานสถานะของรถยนต์ให้คุณทราบ

CodeLens จะทำหน้าที่คล้ายๆ อย่างนั้น
CodeLens เป็นฟีเจอร์ใหม่ใน Visual Studio 2013 Ultimate
ที่จะรายงานสภาพโค้ดของคุณให้คุณทราบว่า
มีตัวเลขจำนวนการอ้างอิงเมธอด ที่คุณกำลังแก้ไข
เมธอดดังกล่าวถูกทดสอบไปหรือยัง
สถานะการทดสอบเป็นอย่างไร ผ่าน หรือไม่ผ่าน
การอัพเดตโค้ดครั้งล่าสุดใครเป็นคนอัพเด็ต วันเวลาเท่าไหร่
CodeLens จะเป็นรายงานสถานะของโค้ดให้คุณทราบ


 

Peek Definition ฟีเจอร์นี้ ผมชอบมาก
ก่อนหน้านี้ เมื่อคุณเขียนโค้ด
และต้องการดูรายละเอียดของบางอ็อบเจ็กต์ หรือบางเมธอด
คุณจะใช้วิธี คลิกขวาลงบนอ็อบเจ็กต์ดังกล่าว แล้วเลือกเมนู Go to Definition
แล้วกระโดดไปในบรรทัดอื่น หรือไปเปิดโค้ดในหน้าต่างอื่น
ซึ่งเมื่อคุณดูรายละเอียดเสร็จเรียบร้อย และได้แนวคิดแล้ว
คุณจะกลับไปเขียนโค้ดต่อที่จุดเดิม
คุณจะเสียเวลาในการค้นหาว่า เมื่อตะกี้ คุณอยู่ ณ ตำแหน่งใหนของซอร์สโค้ด
คุณสลับหน้าต่างไป-มา คุณจะเกิดความว้าวุ่นใจ
ทำให้ความคิดคุณจะกระเจิง ไม่โฟลว์
ไม่ใหลต่อจากจุดที่คุณกำลังขียนโค้ดเมื่อครู่
แล้วคุณจะเกิดอาการ
    เมื่อกี้คุณไปดูอะไรมา?…
    รายละเอียดมันว่าอย่างไรนะ
    แล้วคุณจะลืม และมึนๆ
เมื่อคุณลืม และมึนๆ
คุณจะลุกจากโต๊ะ ไปหาทานกาแฟ, คุยกับเพื่อน
กลับมาที่โต๊ะ ยังนึกไม่ออก และมึนกว่าเก่า
แล้วคุณก็เปิด Facebook Update Status สักหน่อย
แล้วถ่ายรูป แก้วกาแฟ เน้นโลโก้ สตาร์…บัง แล้วแชร์….
จากนั้นคุณจะรอเพื่อนมา กด Like… ขณะเดียวกันคุณก็หากด Like status ของเพื่อนๆ
มารู้สึกตัวอีกทีถึงเวลาเลิกงาน เตรียมตัวเก็บกระเป๋ากลับบ้าน
หมดไปครึ่งวัน โค้ดดิ่ง คุณไม่ขยับไปใหนเลย
เพียงเพราะคุณเกิดความว้าวุ่นใจ ในการหาเส้นทางกลับมาที่จุดเดิม ทำให้ความคิดคุณไม่โฟลว์

การที่คุณเกิดความว้าวุ่นใจ ความคิดของคุณไม่โฟลว์
สิ่งนี้บอกอะไรกับเรา
สมาธิ! สมาธินั้นสำคัญมาก
ไมโครซอฟท์ ได้เพิ่มฟีเจอร์ Peek เข้ามา
โดยทำให้คุณสามารถ ดูรายละเอียดของโค้ดที่เรียกใช้

  • ณ จุดที่มีการเรียกใช้
  • ณ ตำแหน่งที่เคอร์อยู่
  • ณ ขณะในปัจจุบัน ที่คุณกำลังเขียนโค้ด โดยที่คุณไม่ต้องสลับหน้าต่าง ไปที่อื่น

ณ ขณะปัจจุบัน…
ณ ขณะปัจจุบัน นี้สำคัญมาก
เดล คาร์เนกี้ กล่าวไว้ในหนังสือว่า “จงมีชีวิตอยู่ ในห้อง ที่มีแต่วันนี้
อดีตผ่านมาแล้ว
ส่วนอนาคตเป็นเพียงสิ่งซึ่ง ยังไม่ปรากฏรูปร่าง และยาวนานเท่าไหร่ ไม่มีใครบอกได้
ชีวิตจริงของคุณ มีอยู่ ณ ขณะ ปัจจุบัน ที่คุณกำลังเขียนโค้ดนี้ เท่านั้น
ทุกครั้งที่เข็มวินาทีกระดิก เหตุการณ์เหล่านั้นจะ กลายเป็นอดีตไปทันที
ถ้าคุณลองสังเกตุ ย้อนกลับมาดูที่ตัวเองดีดี สิ่งที่ทำให้คุณกังวลใจ ไม่สบายใจ
เครียดจนเขียนโค้ดไม่ออก เป็นเพราะคุณใช้หน่วยความจำ(Memory) ในหัว
ไปคิดเรื่องในอดีต(ปัญหาที่ผ่านมาแล้ว…)
หรือไม่ก็เป็นเรื่องที่ยังไม่เกิดในอนาคต (ปัญหาที่ยังไม่เกิดขึ้น…)
แล้วคุณก็นำความกังวลใจเหล่านั้นมาคิดในปัจจุบัน
จนหน่วยความจำในหัวของคุณเหลือน้อย หรือแทบไม่เหลือ
สำหรับการประมวลผลข้อมูลตรงหน้าคุณ ในขณะที่คุณกำลังเขียนโค้ดอยู่
ทำให้คุณแก้ไขปัญหาได้ล่าช้า หรือไม่สามารถหาทางออกของปัญหาได้
สิ่งที่จะทำให้ ชีวิตของคุณมีความราบรื่นได้จริงๆ คือ ชั่วขณะ ปัจจุบัน นี้เท่านั้น
ณ ขณะปัจจุบัน ที่คุณกำลังเขียนโค้ด
ถ้าคุณไม่เสียเวลา ในการสลับหน้าต่างไปมา ซึ่งจะทำให้คุณเกิดความว้าวุ่นใจ
เมื่อไม่เหตุปัจจัยในการดึงความคิดของคุณให้หลุดไปจากสิ่งที่คุณกำลังโค้ดดิ้ง
ความคิดของคุณจะโฟลว์ และเริ่มใหลเป็นน้ำ
เมื่อนั้นการเขียนโค้ดของคุณจะเริ่มราบรื่น
เมื่อคุณทำงาน ด้วยความราบรื่น ความว้าวุ่นใจต่างๆ จะหายไป คุณจะเริ่มมีความสุข
เมื่อคุณทำงาน ด้วยความความสุข คุณจะเริ่มมีสมาธิ
เมื่อคุณงาน ด้วยสมาธิ ใจจดใจจ่อ เมื่อนั้น Productivity ของคุณจะเพิ่มขึ้นหลายเท่าตัว
เพราะนี้คือ
Visual Studio 2013 Editor Productivity


 

ไปดูตัวอย่าง


 

ในสไลด์นี้
เราจะดูที่บางส่วนของ Performance tools และ การดีบั๊ก


Visual Studio 2013 ได้เพิ่มฟีเจอร์ที่ดี
ที่ช่วยตรวจสอบ การ Return ค่าตัวแปร ของฟังก์ชัน การดีบัก
การทำเช่นนี้มีประโยชน์มาก เนื่องจากไม่เก็บค่าลงในตัวแปร Local และต้องตรวจไปพวกสอบพวกมันอีก
ซึ่งก่อนหน้านี้ การดูค่าตัวแปร คุณสามารถดูผ่าน Watch Window แต่คุณต้องทำด้วยตัวเอง

แต่ใน Visual Studio 2013

คุณสามารถดูได้ทันทีจาก Autos windows
และคำสั่ง ?$ReturnValue


ในหัวข้อเกือบสุดท้ายของเรา
จะแสดงบางสิ่งที่เจ๋งของ .NET Framework 4.5.1
ที่ได้เปิดการใช้งานใน Visual Studio 2013


ซึ่งใน .NET Framework 4.5.1 นั้น
ได้รับการปรับปรุงเพื่อ
เพิ่ม Developer Productivity เช่น
ฟีเจอร์ Edit and Continue ที่ทำให้นักพัฒนาสามารถ
แก้ไขโค้ดได้ทันที บน OS 64 บิต
ซึ่งก่อนหน้า จะทำได้เฉพาะใน OS32 บิต เท่านั้น


มาที่หัวข้อสุดท้าย
สำหรับท่านที่ยังไม่เคยใช้งาน LightSwitch
เราไปดูวิธีสร้างโปรแกรม Mobile Web Business ง่ายๆด้วย LightSwitch


ถ้าคุณสร้าง โปรแกรม LightSwitch ครั้งแรก มี 4 ขั้นตอน

  1. สร้างโปรเจ็กต์
  2. กำหนด Data source
  3. สร้างหน้าจอ
  4. เอาโปรแกรมไปใช้งาน


 

1. สร้างโปรเจ็กต์


2. กำหนด Data Source โดย
คุณสามารสร้างใหม่ หรือใช้ของที่มีอยู่


ขั้นตอที่ 3-4 ไปดูในตัวอย่าง


ขั้นตอนที่ 1-2 คุณจะได้รูปนี้
ตัวอย่างนี้ผมใช้ ตัวอย่างฐานข้อมูล Northwind
โดยจะทำโปปรแกรมจัดการข้อมูล Product


สร้างหน้าจอ
คลิกขวาบน Screens=> Add Screen…


เลือก Template…
เลือกตาราง Product…กด OK


 

คุณจะได้รูปนี้


แล้วรัน…คุณจะเห็นไอเท็ม Product ดังรูป


 

ถ้าคุณต้องการคลิกลงบนไอเท็มของ Product
แล้วให้แสดงรายละเอียดของ Product และสามารถแก้ไขได้
คุณทำได้ง่ายๆ เพียงปรับพรอเพอร์ตี้ นิดเดียว ดังนี้

 

แล้วกด OK


 

สร้างหน้าจอใหม่อีกครั้ง…กด OK


เมื่อคุณคลิกบนไอเทม
จะแสดงหน้าต่าง รายละเอียด Product คุณสามารถแก้ไขข้อมูลได้

 

สำหรับท่านที่ต้องการ
ศึกษาเพิ่มเติม Resource ตามนี้


 

ด้วย Visual Studio 2013
ช่วยให้คุณเขียนโค้ดได้อย่างราบรื่น
เมื่อคุณเขียนโค้ดได้อย่างราบรื่น คุณจะเริ่มมีความสุข
เมื่อคุณมีความสุข สมาธิคุณจะเกิด
เมื่อสมาธิคุณเกิด โปรดักทีวีตี้ ของคุณ ก็จะเพิ่มขึ้น
จงเขียนโค้ดของคุณอย่างมีความสุข
เมื่อคุณมีความสุข คุณจะทำงานโดยไม่ต้องทำงาน


 

Slide: What’s new for developers in Visual Studio 2013:
http://www.slideshare.net/…/whats-new-for-developers-in…

Slide: Mobile Web Business Apps with LightSwitch:
http://www.slideshare.net/…/mobile-web-business-apps…

โดย:
Nano

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Uncategorized
4 comments on “What’s new for developers in Visual Studio 2013
  1. aussietny พูดว่า:

    Reblogged this on aoiljktang :p and commented:
    เก็บไว้ใช้ทำงานคอม55555555

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: