معرفی Kendo UI
سخنان بزرگان!
بسی لذت بردم!
یک جمله هم من از خودم بنویسم:
اگر به من 1 میلیون تومان بدهید و بگویید بیا اشکال این برنامه را درست کن، من ترجیح میدهم 10 هزار تومان بگیرم و آنرا از اول بنویسم!
نگران Angular 3 نباشید
in Angular 1.x we had this:
- Angular 1.0 - major version
- Angular 1.1 - major version (well, more a preview of Angular 1.2)
- Angular 1.2 - major version
- Angular 1.3 - major version (dropped IE8 support)
- Angular 1.4 - major version
- Angular 1.5 - major version
In “Angular 2”, you’re looking at this:
- Angular 2 - major version
- Angular 3 - major version
- Angular 4 - major version
- Angular 5 - major version
- Angular 6 - major version
- Angular 7 - major version
معرفی #F
#F یک زبان برنامه نویسی تابع گرا است و گزینه ای بسیار مناسب برای حل مسایل کامپیوتری. اما استفاده از زبان برنامه نویسی تابعی محض برای نوشتن و تولید پروژههای نرم افزاری مناسب نمیباشد. به همین دلیل نیاز به استفاده از این زبانها در کنار سایر زبانهای شی گرا احساس میشود. #F یک زبان همه منظوره دات نت است که برای حالت اجرا به صورت همه منظوره استفاده میشود. برخی زبانهای تابع گرا دیگر نظیر Lisp و Haskel و OCaml (که #F بسیار نزدیک به این زبان میباشد) با دستورات زبان اجرای سفارشی کار میکنند و این مسئله باعث نبود زبان برنامه نویسی چند فعالیته میشود. شما میتوانید از برنامه نویسی توصیفی هم استفاده کنید و توابع را به راحتی با هم ترکیب کنید و یا روشهای شی گرایی و دستوری را در همان برنامه استفاده کنید.
تاریخچه
#F توسط دکتر دون سیم ابداع شد. در حال حاضر #F وابسته به تیمی کوچک ولی پیشرفته واقع در مرکز تحقیقات شرکت مایکروسافت میباشد. #Fمدل خود را از روی زبان برنامه نویسی OCAML انتخاب کرد و سپس با گسترش قابلیتهای فنی، خود را در دات نت گنجاند. #F در بسیاری از برنامههای بزرگ دنیای واقعی استفاده شده است که این خود نمایانگر آکادمیک نبودن محض این زبان است. با توجه به اینکه زبان تابع گرای دیگر به ندرت در دات نت توسعه پیدا کرده است #F به عنوان استاندارد در این مقوله در آمده است. زبان #F از نظر کیفیت و سازگار بودن با دات نت و VisualStudio بسیار وضعیت بهتری نسبت به رقبای خود دارد و این خود دلیلی دیگری است برای انتخاب این زبان.
استفاده در دات نت
#F کاملا از دات نت پشتیبانی میکند و این قابلیت را به برنامه نویسان میدهد که هر چیزی را که در سایر زبانهای دات نت استفاده میکنند در این زبان نیز قابل استفاده باشد. همچنین میتواند برای کد نویسی IL نیز استفاده شود.
#F به راحتی قابل اجرا در محیط لینوکس و مکینتاش نیز است.
استفاده کنندگان #F
#F در شرکت مایکرو سافت به شدت استفاده میشود. رالف هربریش که یکی از مدیران دوگانه گروه بازیهای مایکروسافت و از متخصصین آموزش ماشین است در این باره میگوید:
*اولین برنامه کاربردی برای انتقال 110 گیگا بایت از طریق 11000 فایل متنی در بیش از 300 دایرکتوری و وارد کردن آنها در دیتابیس بود. کل برنامه 90 خط بود و در کمتر از 18 ساعت توانست اطلاعات مربوطه را در SQL ذخیره کند. یعنی ده هزار خط برنامه متنی در هر ثانیه مورد پردازش قرار گرفت.همچنین توجه کنید که من برنامه را بهینه نکردم بلکه به صورت کاملا عادی نوشتم. این جواب بسیار قابل توجه بود زیرا من انتظار داشتم حداقل یک هفته زمان ببرد.
دومین برنامه، برنامه پردازش میلیونها Feekback مشتریان بود. ما روابط مدلی زیادی را توسعه دادیم و من این روابط را در #F قرار دادم و دادههای مربوط به SQL را در آن فراخوانی کردم و نتایج را در فایل داده ای MATLAB قرار دادم و کل پروژه در حد صد خط بود به همراه توضیحات. زمان اجرای پروژه برای دریافت خروجی ده دقیقه بود در حالی که همین کار را توسط برنامه #C قبلا توسعه داده بودیم که بیش از هزار خط بود و نزدیک به دو روز زمان میبرد.*
Derivative One که یک شرکت بزرگ در تولید نرم افزارهای شبیه ساز مالی است مدلهای مالی نرم افزارهای خود را در #F پیاده سازی کرده است.
چرا #F ؟
همیشه باید دلیلی برای انتخاب یک زبان باشد. در حال حاضر #F یکی از قدرتمندترین زبانهای برنامه نویسی است. در ذیل به چند تا از این دلایل اشاره خواهم کرد:
- #F یک زبان استنباطی است. برای مثال در هنگام تعریف متغیر و شناسه نیاز به ذکر نوع آن نیست. کامپایلر با توجه به مقدار اولیه تصمیم میگیرد که متغیر از چه نوعی است.
- بسیار راحت میتوان به کتابخانه قدرتمند دات نت دسترسی داشت و از آنها در پروژههای خود استفاده کنید.
- #F از انواع روشهای برنامه نویسی نظیر تابعی، موازی، شی گرا و دستوری پیشتیبانی میکند.
- برخلاف تصور بعضی افراد، در #F امکان تهیه و توسعه پروژههای وب و ویندوز و حتی WPF و Silverlight هم وجود دارد.
- نوع کدنویسی و syntax زبان #F به برنامه نویسان این اجازه را میدهد که الگوریتمهای پیچیده مورد نظر خود را بسیار راحتتر پیاده سازی کنند. به همین دلیل بعضی برنامه نویسان این زبان را با Paython مقایسه میکنند.
- #F به راحتی با زبان #C و VB تعامل دارد. یعنی میتونیم در طی روند تولید پروژه از قدرتهای هر سه زبان بهره بگیریم.
- طبق آمار گرفته شده از برنامه نویسان، #F به دلیل پشتیبانی از نوع داده ای قوی و مبحث Unit Measure، خطاها و Bugهای نرم افزار را کاهش میدهد.
- به دلیل پشتیبانی VS.Net از زبان #F و وجود ابزار قدرتمند برای توسعه نرم افزار به کمک این زبان (unitTesting و ابزارهای debuging و ..)این زبان تبدیل به قدرتهای دنیای برنامه نویسی شده است.
- #F یک زبان بسیار مناسب برای پیاده سازی الگوریتمهای data-mining است.
- #F از immutability در تعریف شناسهها پشتیبانی میکند.(در فصلهای مربوطه بحث خواهد شد)
- و.....
چرا #F نه ؟
#F هم مانند سایر زبان ها، علاوه بر قدرت بی همتای خود دارای معایبی نیز میباشد. (مواردی که در پایین ذکر میشود صرفا بر اساس تجربه است نه مستندات).
- نوع کدنویسی و syntax زبان #F برای برنامه نویسان دات بیگانه ( و البته کمی آزار دهنده) است. اما به مرور این مشکل، تبدیل به قدرت برای مانورهای مختلف در کد میشود.
- درست است که در #F امکان تعریف اینترفیس وجود دارد و یک کلاس میتواند اینترفیس مورد نظر را پیاده سازی کند ولی هنگام فراخوانی متدهای کلاس (اون هایی که مربوط به اینترفیس است) حتما باید instance کلاس مربوطه به اینترفیس cast شود و این کمی آزار دهنده است.(در فصل شی گرایی در این مورد شرح داده شده است).
- زبان #F در حال حاضر توسط VS.Net به صورت Visual پشتیبانی نمیشود.(امکاناتی نظیر drag drop کنترلها برای ساخت فرم و ....). البته برای حل این مشکل نیز افزونه هایی وجود دارد که در جای مناسب بحث خواهیم کرد.
آیا برای یادگیری #F نیاز به داشتن دانش در برنامه نویسی #C یا VBداریم؟
به طور قطع نه. نوع کد نویسی (نه مفاهیم)در #F کاملا متفاوت در #C است و این دو زبان از نظر کد نویسی شباهتشان در حد صفر است. برای یادگیری #F بیشتر نیاز به داشتن آگاهی اولیه در برنامه نویسی (آشنایی با تابع، حلقه تکرار، متغیر ها) و شی گرایی(مفاهیم کلاس، اینترفیس، خواص، متدها و...) دارید تا آشنایی با #C یا VB.
چگونه شروع کنیم؟
اولین گام برای یادگیری آشنایی با نحوه کد نویسی #F است. بدین منظور در طی فصول آموزش سعی بر این شده است از مثالهای بسیار زیاد برای درک بهتر مفاهیم استفاده کنم. تا جای ممکن برای اینکه تکرار مکررات نشود و شما خواننده عزیز به خاطر مطالب واضح و روشن خسته نشوید از تشریح مباحث واضح خودداری کردم و بیشتر به پیاده سازی مثال اکتفا نمودم.
پس از فشردن دکمه Add کمی صبور باشید تا صفحه بارگذاری شود و تصویر زیر برای شما نمایش داده شود (دادههای نمایش داده شده آزمایشی و تصادفی هستند و با بازآوری صفحه تغییر میکنند):
همانطور که مشاهده میکنید دو دکمه در بالای این نمودار نمایش داده شده است (در قسمت تنظیمات web part هم میتوانید ارجاعهای لازم به این لینکها را بیابید ) :
Data & Appearance برای مدیریت منبع دادههای نمودار و نحوه نمایش دادهها که دو لینک اصلی در آن وجود دارد :
Advanced Propertes برای مدیریت قسمتهای دیگر از قبیل جزییات رنگ بندی و زمینه و ...
همانطور که در شکل زیر مشاهده میکنید میتوانید مشخص کنید که دادههای محورهای نمودار از کدام ستونها داده را بگیرند و در صورت نیاز به عملیات گروه بندی میتوانید آن را اعمال کنید :
در دیگر قسمتهای این فرم میتوانید تنظیمات دیگری را انجام دهید برای مثال در قسمت Other Fields میتوانید برای آیتمهای روی نمودار یک لینک یا Tooltip تعریف کنید .
پس از زدن دکمه Finish خروجی زیر را خواهید دید :
حال میتوانید از قسمت Customize Your Chart به ویرایش نحوه نمایش دادهها بپردازید
همانطور که مشاهده میکنید در این قسمت میتوانید نوع نمودار را بسته به نیاز خود انتخاب نمایید ، ویژکیهای نمایشی آن را تغییر داده و برای نمودار خود ویژکیهای 3 بعدی تنظیم کنید .
(برای نمایش بهتر خاصیت group by را از نمودار حذف کردم ) . نوع نمایش را مانند زیر تغییر میدهم :
در این قسمت Theme نمایشی نمودار و نوع نمایش ستونها و درصد transparency بودن ستون را بعلاوه طول و عرض اندازه نمودار و نوع خروجی نمایش داده شده در صفحه میتوانید تنظیم کنید . روی Next کلیک میکنم تا وارد دیگر تنظیمات شود از جمله عنوان نمودار و راهنمای آن :
در قسمت بالا تنظیمات عنوان برای نمودار قابل اجرا میباشد و در قسمت زیرین ، توضیحات و اختصارات راهنمای نمودار قابل تنظیم است . در این قسمت حتی میتوانید راهنما را داخل خود نمودار انداخته (Dock to chart Area ) و موقعیت آن را مشخص کنید . کار تقریبا تمام شد . روی Finish کلیک کنید .
حال با رجوع به قسمت Advanced Propertes میتوانید روی ظاهر این نمودار بیشتر کار کنید . این یک نمونه ساده از خروجی کار با این قسمت است :
اگر با React کار کرده باشید، یک چنین کدهایی اساس آنرا تشکیل میدهند:
import React from "react"; const Rentals = () => { return <h1>Rentals</h1>; }; export default Rentals;
@page "/razor" @template @ItemTemplate(emp) @code { RenderFragment template = @<p>The time is @DateTime.Now.</p>; RenderFragment<Employee> ItemTemplate = (item) => @<p>Employee name is @item.Name.</p>; Employee emp = new Employee { Name = "Test" }; public class Employee { public string Name; } }
یا حتی میتوان از RenderFragment برای وهله سازی پویای یک کامپوننت مانند SurveyPrompt، مقدار دهی خاصیت Title آن و درج آن در صفحه به صورت زیر هم استفاده کرد:
@page "/" @CreateDynamicComponent() @code { RenderFragment CreateDynamicComponent() => builder => { builder.OpenComponent(0, typeof(SurveyPrompt)); builder.AddAttribute(1, "Title", "Some title"); builder.CloseComponent(); }; }
FreeTextBox یکی از ادیتورهای متنی بسیار خوب تحت وب ASP.Net است که از نگارش 1 تا 3 و نیم ASP.Net را پشتیبانی میکند. به همراه آن یک image gallery هم جهت آپلود تصاویر ارائه میشود که بسیار ارزشمند است. اما مشکلی که دارد عدم بررسی پسوند فایل آپلود شده است. به عبارتی خاصیت AcceptedFileTypes آن هنگام آپلود تصاویر بررسی نمیشود و میتواند مشکلات امنیتی حادی را به وجود آورد (برای مثال شخص بجای تصویر میتواند فایل aspx را نیز آپلود کند). راه حلی هم برای آن وجود ندارد. سورس این کامپوننت فقط به خریداران ارائه میشود و نگارش مجانی آن بدون سورس است.
اما با استفاده از تواناییهای موجود در فایل استاندارد global.asax میتوان روی آپلود تمامی فایلها در برنامه نظارت داشت (نه فقط این یک مورد بلکه سراسر برنامه تحت کنترل قرار میگیرد). روش کار به صورت زیر است:
protected void Application_BeginRequest(Object sender, EventArgs e)
{
List<string> toFilter = new List<string> { ".aspx", ".asax", ".asp", ".ashx", ".asmx", ".axd", ".master", ".svc" };
if (HttpContext.Current != null && HttpContext.Current.Request != null && HttpContext.Current.Request.Files != null)
for (int i = 0; i < HttpContext.Current.Request.Files.Count; i++)
{
string fileNamePath = HttpContext.Current.Request.Files[i].FileName.ToLower();
string name = Path.GetFileName(fileNamePath);
string ext = Path.GetExtension(fileNamePath);
if (toFilter.Contains(ext) || name == "web.config")
{
HttpContext.Current.Response.StatusCode = 403; //Forbidden
HttpContext.Current.Response.End();
}
}
}
این کد را به صورت Http module هم میتوان درآورد.
پیشتر مطلبی را در مورد ساخت کتابخانههای مخصوص Angular را به کمک Angular CLI، در این سایت مطالعه کرده بودید. در این مطلب فرض بر این است که شما توسعه دهندهی Angular «نیستید»، اما قصد دارید با استفاده از ابزار Angular CLI، کتابخانهی جاوا اسکریپتی عمومی بسیار مدرنی را با پشتیبانی از تمام موارد یاد شده، تولید کنید.
ساخت قالب آغازین کتابخانه به کمک Angular CLI
برای تبدیل کتابخانههای جاوا اسکریپتی خود به قالب مدرنی که در مقدمه عنوان شد، نیاز به ابزاری جهت خودکارسازی فرآیندهای آن داریم و این ویژگیها مدتی است که به ابزار Angular CLI اضافه شدهاند و همانطور که عنوان شد، مخاطب این مطلب، توسعه دهندگان عمومی JavaScript است و نه صرفا توسعه دهندگان Angular. به همین جهت نیاز است ابتدا این ابزار را نصب کرد:
npm install -g @angular/cli
پس از نصب Angular CLI، از آن جهت ساخت قالب تولید کتابخانههای TypeScript ای استفاده میکنیم:
ng new my-math-app
بنابراین پس از اجرای دستور فوق، از طریق خط فرمان به پوشهی my-math-app وارد شده و سپس دستور زیر را اجرا کنید:
ng generate library ts-math-example
تکمیل کتابخانهی جاوا اسکریپتی
همچنین میتوان به فایل my-math-app\projects\ts-math-example\package.json نیز مراجعه کرد (فایل package.json پروژهی کتابخانه) و قسمت peerDependencies آن را که به Angular اشاره میکند نیز حذف نمود.
سپس یک فایل خالی math.ts را به پوشهی یاد شده اضافه میکنیم:
با این محتوا:
export function add(num1: number, num2: number) { return num1 + num2; }
در ادامه نیاز است این ماژول را به فایل my-math-app\projects\ts-math-example\src\public-api.ts معرفی کرد تا به عنوان API قابل دسترسی کتابخانه، در دسترس قرار گیرد:
/* * Public API Surface of ts-math-example */ export * from './lib/math';
در حین توسعهی کتابخانه خود،جهت اطمینان از صحت کامپایل برنامه، دستور ng build ts-math-example --watch را در پوشهی my-math-app صادر کنید. کار آن کامپایل مداوم پروژهی کتابخانه بر اساس تغییرات داده شدهاست. حاصل این کامپایل نیز در پوشهی my-math-app\dist\ts-math-example قرار میگیرد:
این همان خروجی مدرنی است که در ابتدای بحث از آن صحبت کردیم و شامل کتابخانههای ES5 و ES2015 به بعد و همچنین ارائهی متادیتای مخصوص TypeScript نیز هست.
کامپایل و انتشار نهایی کتابخانه
پس از تکمیل کتابخانهی خود، اکنون میتوانیم آنرا به سایت npm، برای استفادهی سایرین ارسال کنیم. برای این منظور باید مراحل زیر طی شوند:
ابتدا فایل package.json واقع در ریشهی پوشهی ts-math-example را جهت تعریف اطلاعات این کتابخانه، تکمیل کنید. سپس دستورات زیر را در ریشهی پروژهی اصلی صادر کنید:
ng build ts-math-example --prod cd dist/ts-math-example npm publish
با دستور دوم به پوشهی خروجی کتابخانه وارد شده و دستور سوم، آنرا به سایت npm ارسال میکند.
استفاده کنندهی از کتابخانهی ما (این استفاده کننده میتواند هر نوع پروژهی جاوا اسکریپتی اعم از Angular ،React ،Vue ،ES6 ،TypeScript و غیره باشد) ابتدا با دستور npm install ts-math-example --save آنرا نصب و به پروژهی خود اضافه کرده و سپس به نحو زیر میتواند از آن استفاده کند:
import { add } from '@myuser/ts-math-example';