علی یگانه مقدم علی یگانه مقدم
مطالب
مروری بر Blazor (قسمت اول)

Blazer یک فریمورک جدید تحت وب هست که این امکان را به برنامه نویسان دات نت میدهد تا از طریق Open Web Standards بتوانند کدهای خود را در مرورگر اجرا و تجربه جدیدی از ساخت برنامه‌های تک صفحه‌ای را داشته باشند. در این نوشتار قصد داریم ساختار و نحوه کارکرد این فناوری را بررسی نماییم. قبل از هر چیزی به دوران قبل از ایجاد Web Assembly برمی‌گردیم :

همانطور که در شکل زیر می‌بینید، زمانی تنها جاوااسکریپت فرمانروای یک مرورگر محسوب می‌شد. در این حالت کدهای جاوااسکریپت به هر شکلی که نوشته شده باشند در اختیار parser قرار میگیرند  و یک درخت از کدهای نوشته شده ایجاد شده و از طریق یک کامپایلر، کد‌ها به سطح پایین‌تری مشابه بایت کدها تبدیل می‌گردند و سپس از طریق یک مفسر دسترسی به بخش‌های مختلف api یک مرورگر در اختیار این کدها قرار میگیرند تا کار مورد نظر انجام شود.

 

در تصویر بعدی Web Assembly به بخش مفسر تزریق میشود و از طریق آن زبان‌های مختلف باید بر اساس Web Standard، به کدهای سطح‌های پایین‌تری کامپایل شوند. در اینجا این نکته مدنظر باشد که کدهایی که به سطح پایین‌تری کامپایل میشوند، تنها در داخل مرورگر شناخته شده میباشند و در خارج از دنیای وب قابل استفاده نیستند و نمیتوانند در سطح سیستم عامل قابل اجرا باشند. به همین جهت به شکل یک sandbox مورد استفاده قرار میگیرند و از این لحاظ، مشکلات امنیتی را در خارج از مرورگر ایجاد نمی‌کنند.

 

در شکل سوم Blazor که ترکیبی از نام Browser + Razor میباشد اضافه میشود. Blazor در اینجا وظیفه دارد محتوای فایل دریافتی را که شامل کدهای  HTML و  CSS و جاوااسکریپت است، به کدهای قابل فهمی برای مرورگر تبدیل کند. سپس mono وارد کار میشود. همانطور که می‌دانید mono جهت پشتیبانی از اجرای چندسکویی پروژه‌های دات نت اضافه شده که در اینجا هم همان وظیفه را منتها برای مرورگرهای مختلف، دارد. بدین جهت مونوی کامپایل شده بر روی Web Assembly قرار میگیرد تا کدهای دریافتی را تفسیر نماید. Blazor در اینجا dll‌های لازم را در mono بارگذاری میکند و سپس mono کدها را برای Web Assembly تفسیر میکند.

 

  اگر در تصویر بالا درقت کنید دو فایل Blazor.js و mono.js نیز وجود دارند که یک ارتباط به صورت Introp layer با Web Assembly برقرار کرده‌اند. البته در حال حاضر این ارتباط توسط Web Assembly پشتیبانی نمی‌شود. در صورت پیاده سازی و پشتیبانی Web Assembly از این بخش، میتوان با جاوااسکریپت هم با آن ارتباط برقرار کرد و یک ارتباط دو طرفه‌ای بین کدهای js و دات نت برقرار نمود؛ بدین صورت میتوان در دات نت توابع js را صدا زد و در js توابع دات نت صدا زده شوند.

همچنین مایکروسافت تنها به استفاده از Web Assembly اکتفا نکرده و از طریق SignalR نیز این  بستر را فراهم کرده است. با ایجاد یک سوکت به سمت سرور، تغییرات صفحه در سمت سرور، محاسبه و سپس بازگشت داده می‌شوند. در این حالت نیازی به ارسال فایل‌های dll نسبت به روش قبل نمی‌باشد. برای استفاده از این حالت میتوانید از بین گزینه‌های موجود در ایجاد پروژه، Blazor Server-side را مورد استفاده قرار دهید. البته این روش هم مزایا و معایب خودش را دارد.

جهت مقایسه این دو بخش به بررسی نکات مثبت و منفی میپردازیم:
1- در حالت استفاده از Web Assembly، حجمی حدود نزدیک به دو مگابایت بایدجابجا شود؛ ولی در حال سمت سرور، حجم صفحه حدود 100 کیلوبایت خواهد شد.
2- در حالت سمت سرور، تغییرات به دلیل رفت و برگشت به سرور با کمی تاخیر روبرو میشوند.
3- در حالت سمت سرور کارکرد آفلاین از دست میرود.
4- در حالت سرور، به دلیل اینکه همه کارها سمت سرور انجام میشود، ترافیک سرور را بالاتر میبرند.
5- استفاده از حالت سرور، معماری ساده‌تر و پیچیدگی‌های کمتری در سمت کلاینت دارد.
‫۵ سال و ۶ ماه قبل، جمعه ۱۶ فروردین ۱۳۹۸، ساعت ۲۳:۰۰
سالار ربال سالار ربال
نظرات مطالب
HTML5 Web Component - قسمت دوم - Custom Elements
این سری مطالب ادامه دار نخواهد بود و به عنوان مکمل منابع موجود در اینترنت،  ویدئو مربوط به وبینار Web Components از طریق لینک زیر در دسترس می‌باشد که مباحث زیر را شامل می‌شود:
  • چرا Web Components؟
  • وضعیت پشتیبانی و به کار گیری Web Components
  • توسعه چند کامپوننت نمونه با استفاده از Web Components
  • بررسی ابزارهای جانبی
  • استفاده به شکل Framework agnostic 
‫۳ سال و ۶ ماه قبل، شنبه ۲۳ اسفند ۱۳۹۹، ساعت ۲۱:۰۶
ابوالفضل روشن ضمیر ابوالفضل روشن ضمیر
مطالب
مفهوم Workspace در Angular
Workspace، اولین بار در انگیولار 6 معرفی شد. Angular Workspace به شما اجازه می‌دهد کل web application خود را به چندین پروژه‌ی کوچکتر سازماندهی کنید. بیشتر پروژه‌های کوچک انگیولار تنها شامل یک یا دو پروژه، به ازای هر Workspace می‌باشند. برای مثال وقتی شما یک پروژه‌ی جدید انگیولار را با Angular CLI ایجاد می‌کنید، در این حالت Workspace شامل یک app  واقعی و یک پروژه e2e tests می‌باشد. 

مستندات انگیولار یک پروژه را به صورت زیر توصیف می‌کند:  
A set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests.


درست همانند مفهوم یک کتابخانه در توسعه نرم افزار، یک کتابخانه اشاره دارد به مجموعه‌ای از کد‌های با قابلیت استفاده‌ی مجدد که می‌توانند بین پروژه‌های مختلف به اشتراک گذاشته شوند؛ هم چنین Angular CLI این کار را برای شما آسان می‌کند تا کتابخانه خودتان را در یک مرکز ثبت مثل npm  انتشار دهید تا توسط دیگر توسعه دهندگان استفاده شود.
نوع Application اشاره به یک Application مستقل انگیولار دارد.    


Create Empty Workspaces  

در انگیولار 7 یک CLI option جدید ( create-application-- ) معرفی شد که شما می‌توانید با اضافه کردن این option به دستور ng new، سبب ایجاد یک Workspace خالی شوید. این option  با دستور ng new استفاده می‌شود و می‌تواند مقدار true یا false را دریافت کند که به صورت پیش فرض به true  تنظیم شده است. بنابراین وقتی شما یک پروژه‌ی جدید را ایجاد می‌کنید، سبب ایجاد یک پروژه‌ی اولیه انگیولار در Workspace هستید؛ همچنین می‌توانید create-application-- را به false تنظیم کنید تا CLI یک پروژه اولیه انگیولار را در Workspace  ایجاد نکند .

اکنون اجازه دهید آن را در عمل ببینیم: 
مطمئن شوید که نگارش انگیولار شما، 7 یا بالاتر باشد:
ng --version

Command Prompt را باز کرده و سپس درستور زیر را در آن اجرا کنید: 
ng new angular-apps --create-application=false
سپس Angular CLI این هشدار را به شما می‌دهد که آیا تمایل دارید، Angular routing را اضافه کنید و همچنین از کدام stylesheet format تمایل دارید که استفاده کنید؛ سپس فایل‌های زیر تولید خواهند شد:  
angular-apps/README.md
angular-apps/angular.json
angular-apps/package.json
angular-apps/tsconfig.json
angular-apps/tslint.json
angular-apps/.editorconfig
angular-apps/.gitignore
و همچنین CLI تمام وابستگی‌های انگیولار را در یک پوشه به نام node_modules نصب خواهد کرد.


اکنون به Command Prompt برگردیم و وارد Angular Workspace خودمان شویم: 
cd angular-apps

در ادامه یک پروژه جدید را با دستور زیر ایجاد می‌کنیم: 
ng generate application admin
دستور بالا سبب ایجاد دو پروژه می‌شود ( admin  و admin-e2e )، در پوشه Projects. 
 همچنین می‌توانید یک کتابخانه را در Workspace خود با استفاده از دستور زیر ایجاد کنید: 
ng generate library ngx-qrcode
ngx-qrcode نام کتابخانه می‌باشد. این کتابخانه در پوشه projects، درست مثل مابقی Application ها اضافه خواهد شد. 
بعد از ایجاد کردن چندین Application بدون Application پیش فرض برای Workspace خود، می‌توانید اقدام به ایجاد modules ، service ، components  و ... در یک پروژه مشخص با استفاده از project option-- کنید. 

برای نمونه یک سرویس را در پروژه admin ایجاد می‌کنیم:
ng generate service auth --project=admin
که سبب ایجاد دو فایل زیر می‌شود:
projects/admin/src/app/auth.service.spec.ts
projects/admin/src/app/auth.service.ts

Serving Specific Apps in Your Workspace 

جهت به خدمت گرفتن یک Application مشخص در Workspace دستور زیر را اجرا کنید: 
ng serve admin
admin نام Application شما می‌باشد که می‌خواهید آن را به خدمت بگیرید. 


نکته
اگر در Command Prompt دستور زیر را وارد کنید:  
ng new
سریعا هشدار زیر را به شما می‌دهد:
What name would you like to use for the new workspace and initial project?
از شما می‌خواهد که نام Workspace  مورد نظرتان را وارد کنید و بعد از آن همان دو هشدار Routing و stylesheet format  می‌باشد که سبب ایجاد یک پروژه اولیه انگیولار در Workspace می‌شود.


نتیجه گیری 
در این مطلب متوجه مفهوم Angular Workspace و روش ایجاد کردن یک Workspace خالی شدیم و همچنین چگونه یک Application و یک Library را در یک Workspace   ایجاد کنیم. 

‫۵ سال و ۳ ماه قبل، چهارشنبه ۲۶ تیر ۱۳۹۸، ساعت ۱۹:۰۵