พงศพัฒน์ หังสพฤกษ์ – Page 2

Stencil : Web component compiler

July 2, 2018 21:01

Stencil เป็น compiler ที่ทำหน้าที่สร้าง standards-based web component (custom element) ซึ่งรวบรวมแนวคิดที่ดีของ framework ต่างๆที่ได้รับความนิยมสูง มาไว้ใน component โดย build-time tool ที่ใช้งานง่าย เช่น Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX web component ที่ได้จาก Stencil เป็น standards-based web component ทำให้สามารถใช้งานร่วมกับ framework ต่างๆที่ได้รับความนิยม และสามารถใช้ได้โดยไม่มี framework ก็ได้ จากเดิมเมื่อพัฒนาด้วย framework หนึ่งแล้ว ไม่สามารถนำไปใช้ร่วมกับ framework อื่นได้ Stencil มี APIs เช่น Virtual DOM, JSX, และ async rendering ที่ทำให้สามารถพัฒนา web component ที่ทำงานได้เร็ว มีประสิทธิภาพดีกว่า และสร้างได้ง่ายกว่าเมื่อเปรียบเทียบกับการเขียน custom element โดยตรงโดยไม่ใช้ Stencil และใน Stencil ยังมี small dev server พร้อมความสามารถ live reload อยู่ด้วย เริ่มต้นสร้าง project กับ Stencil การสร้าง component ทำได้โดยเริ่มต้นจาก component starter ดังนี้ git clone https://github.com/ionic-team/stencil-component-starter my-component cd my-component git remote rm origin npm install จากนั้น ถ้าต้องการ start live-reload server สำหรับการพัฒนา ให้ใช้คำสั่ง npm start Updating Stencil ถ้าต้องการ update Stencil เป็น version ล่าสุดให้ใช้คำสั่ง npm install @stencil/core@latest –save-exact Stencil components component ถูกสร้างโดยการสร้าง file .tsx ใน “src/components” directory เขียน component ด้วย JSX และ Typescript ซึ่ง component ที่สร้างมาจาก component starter คือ my-component.tsx import { Component, Prop } from ‘@stencil/core’; @Component({ tag: ‘my-first-component’, styleUrl: ‘my-first-component.scss’ }) export class MyComponent { @Prop() name: string; render() { return (My name is {this.name}); } } เมื่อ compile แล้วเสร็จ สามารถนำ component ไปใช้ใน HTML page ได้เช่นเดียวกับ tag อื่นๆ Web Components จะต้องมี “-” ภายใน tag (“myFirstComponent” เป็นชื่อที่ไม่สามารถใช้งานได้) <my-first-component name=”Max”></my-first-component> เมื่อเปิดผ่าน browser จะแสดงผล My name is Max

Migration project.json to csproj format (C#)

July 13, 2017 12:28

ในช่วงการพัฒนาของ .NET Core tooling จนถึงปัจจุบัน มี design/component หลายอย่างที่มีการเปลี่ยนแปลงในลักษณะที่ไม่ compatible กับ version ก่อนหน้า หรือยกเลิกการใช้งาน หนึ่งในนั้นก็คือ project config file ที่เริ่มต้นใช้รูปแบบ json ซึ่งอยู่ใน file ที่ชื่อ project.json แต่ปัจจุบัน เปลี่ยนมาใช้ MSBuild/csproj format การ migration project.json ไปสู่ .csproj format ทำได้ด้วยกันสองวิธีคือ Visual Studio 2017 dotnet migrate command-line tool ทั้งสองวิธีใช้กลไกการทำงานเดียวกัน ซึ่งผลที่ได้จะเหมือนกัน Visual Studio 2017 เปิด project โดยเปิด file .xproj ใน Visual Studio 2017 จะปรากฎ One-way upgrade dialog ขึ้นมาให้เลือก OK, Visual Studio จะทำการ migrate โดย file ที่ถูก migrate (project.json, global.json, .xproj) จะถูกย้ายไปสำรองไว้ใน folder Backup dotnet migrate ใช้ command-line เข้าไปที่ folder ที่เก็บ project และใช้คำสั่ง dotnet migrate ซึ่งจะทำการ migrate โดย file ที่ถูก migrate (project.json, global.json, .xproj) จะถูกย้ายไปสำรองไว้ใน folder Backup <Project Sdk=”Microsoft.NET.Sdk”> … </Project> ข้อแตกต่างระหว่าง project.json กับ csproj format ( อยู่ในรูปแบบ XML-based ซึ่งมี root node ระบุ sdk ที่ใช้คือ Microsoft.NET.Sdk สำหรับ web project sdk ที่ใช้คือ Microsoft.NET.Sdk.Web ) มีดังนี้ Common options ****** JSON format ****** { “name”: “MyProjectName”, “version”: “1.0.0-alpha-*”, “authors”: [ “name1”, “name2” ], “company”: “PSU”, “language”: “en-US”, “title”: “My library”, “description”: “This is my library.”, “copyright”: “PSU 3000”, “userSecretsId”: “xyz123” } ****** csproj format ****** <PropertyGroup> <AssemblyName>MyProjectName</AssemblyName> <PackageId>MyProjectName</PackageId> <VersionPrefix>1.0.0</VersionPrefix> <VersionSuffix>alpha</VersionSuffix> <Authors>name1;name2</Authors> <Company>PSU</Company> <NeutralLanguage>en-US</NeutralLanguage> <AssemblyTitle>My library</AssemblyTitle> <Description>This is my library.</Description> <Copyright>PSU 3000</Copyright> <UserSecretsId>xyz123</UserSecretsId> </PropertyGroup> frameworks ****** JSON format ****** { “frameworks”: { “netcoreapp1.0”: {}, “net451”: {} } } ****** csproj format ****** <PropertyGroup> <TargetFrameworks>netcoreapp1.0;net451</TargetFrameworks>

Auto remove schema in EDMX on build

July 13, 2016 10:05

Entity Framework (EF) คือ data access technology ที่เริ่มเปิดตัวครั้งแรกเป็นส่วนหนึ่งของ .NET Framework 3.5 SP1 โดยตัว EF จะทำหน้าที่เป็น object-relational mapper ที่ทำให้ผู้พัฒนาไม่จำเป็นต้องเขียน code ในส่วน data access ก็สามารถใช้ข้อมูลจาก relational database โดยผ่าน object model การพัฒนาโปรแกรมโดยใช้ EF นั้นจำเป็นต้องมี Entity Data Model เป็น model ที่กำหนดรายละเอียดเกี่ยวกับ entity และ relationship ระหว่าง entity นั้นๆ การสร้าง Entity Data Model สามารถแยกออกเป็น 2 แนวทางคือ “Code First” เป็นการกำหนดรูปร่างของ model โดยการสร้าง class (เขียน code) จะมี database หรือไม่มีอยู่ก่อนก็ได้ และ “Database First” ที่จะทำการสร้าง model ( reverse engineer) จาก database ที่มีอยู่โดย EF Designer ซึ่ง model ที่ได้จะเก็บอยู่ใน EDMX file (.edmx) สามารถเปิดหรือแก้ไขเพิ่มเติมได้ด้วย EF Designer สำหรับ class ที่ใช้ในโปรแกรมจะถูกสร้างโดยอัตโนมัติจาก EDMX file ข้อมูล Entity Data Model ใน EDMX file อยู่ในรูปแบบ xml สามารถแบ่งออกเป็น 3 ส่วนคือ Storage model, Conceptual model และ Mapping ซึ่งในส่วนของ Storage model จะเป็นข้อมูลรายละเอียดของ entity จาก database เช่น ข้อมูล EntityType ที่ให้รายละเอียดของชื่อของ entity (table ใน database), ชื่อและประเภทของ property (column ของ table ใน database) <EntityType Name=”VF_CONFIG_REPORT”> <Key> <PropertyRef Name=”ID” /> </Key> <Property Name=”ID” Type=”number” Precision=”38″ Scale=”0″ Nullable=”false” /> <Property Name=”REPORT_NAME” Type=”varchar2″ MaxLength=”512″ /> <Property Name=”REPORT_PATH” Type=”varchar2″ MaxLength=”512″ /> <Property Name=”GROUP_TYPE” Type=”number” Precision=”38″ Scale=”0″ /> <Property Name=”SIGN_NUM” Type=”number” Precision=”38″ Scale=”0″ /> <Property Name=”SIGNS” Type=”varchar2″ MaxLength=”128″ /> </EntityType> ข้อมูล EntitySet ที่ประกอบด้วย ชื่อ,ประเภทของ entity, schema และ query ที่ใช้ดึงข้อมูล <EntitySet Name=”VF_CONFIG_REPORT” EntityType=”Self.VF_CONFIG_REPORT” store:Type=”Views” store:Schema=”FINANCE”> <DefiningQuery> SELECT “VF_CONFIG_REPORT”.”ID” AS “ID”, “VF_CONFIG_REPORT”.”REPORT_NAME” AS “REPORT_NAME”, “VF_CONFIG_REPORT”.”REPORT_PATH” AS “REPORT_PATH”, “VF_CONFIG_REPORT”.”GROUP_TYPE” AS “GROUP_TYPE”, “VF_CONFIG_REPORT”.”SIGN_NUM” AS “SIGN_NUM”, “VF_CONFIG_REPORT”.”SIGNS”

ASP.NET Core Part I

July 4, 2016 09:47

asp.net core คือ cross-platform framework สำหรับการพัฒนา web application ที่ทำงานบน .net core หรือ full .net framework เดิม ( .net core สามารถใช้งานได้ทั้ง Windows , Linux และ MacOS โดยที่ส่วนประกอบต่างๆของ .net core ไม่ว่าจะเป็น runtime, libraries, compiler, language และเครื่องมือต่างๆ เป็น open source ทั้งหมด ) ซึ่ง asp.net core ได้รับการออกแบบใหม่ให้มีประสิทธิภาพดีกว่า asp.net เดิมโดยแบ่งส่วนต่างๆออกเป็น module ย่อยเพื่อลด overhead ในการเริ่มต้นทำงาน ซึ่ง asp.net core ประกอบไปด้วยกลุ่มของ NuGet package แทนที่การใช้งาน System.Web.dll ใน asp.net เดิม ซึ่งผู้พัฒนาสามารถเลือกเฉพาะ package ที่ต้องใช้งานเท่านั้น ทำให้ application มีขนาดเล็กลง มีประสิทธิภาพเพิ่มขึ้น,การพัฒนา Web UI และ Web API จะใช้ libraries เดียวกัน, สนับสนุนการใช้งาน dependency injection, web application สามารถใช้งานบน IIS หรือ self-host ภายใต้ process ของตัวเอง ในการพัฒนา asp.net core เราสามารถใช้เครื่องมือที่เป็น text editor ธรรมดาหรือจะใช้เครื่องมือช่วยในการพัฒนาอย่างเช่น Visual Studio ก็ได้ ในส่วนของโครงสร้างของ project asp.net core จะเปลี่ยนไปจากเดิม โดยการกำหนดค่า config ของ project สามารถกำหนดได้ที่ project.json { “title”: “asp.net.core”, “version”: “1.0.0”, “dependencies”: { “NETStandard.Library”: “1.6.0”, “Newtonsoft.Json”: “9.0.1” }, “frameworks”: { “netstandard1.6”: { “imports”: “dnxcore50″ } } } การ reference ไปยัง NuGet package ที่ต้องการใช้งานใน project สามารถกำหนดได้ใน project.json โดยพิมพ์ชื่อ NuGet package ที่ต้องการพร้อมทั้งระบุ vesrion ในส่วน “dependencies” ซึ่งเมื่อทำการบันทึก project.json เครื่องมืออย่างเช่น visual studio จะทำการ restroe NuGet package ให้กับ project โดยอัตโนมัติ asp.net core ได้รับการออกแบบให้รองรับ client-side framework ต่างๆเช่น AngularJS หรือ bootstrap โดยใช้เครื่องมือที่เป็น package manager ในติดตั้ง client-side package ที่ต้องการใช้งาน อย่างเช่น Bower ที่จะกำหนด package ที่ต้องการใช้งานใน bower.json { “name”: “asp.net”, “private”: true, “dependencies”: { “bootstrap”: “3.3.6”, “jquery”: “2.2.0”, “jquery-validation”: “1.14.0”, “jquery-validation-unobtrusive”: “3.2.6” } } หรือ npm ที่จะกำหนด package ที่ต้องการใช้งานใน package.json { “name”: