آیا هنوز به چارچوبهای جاوااسکریپت نیاز داریم؟
Post on 23-Jan-2017
185 Views
Preview:
TRANSCRIPT
سید کاوه احمدی ابهری آیا هنوز به چارچوب های جاوااسکریپت نیاز داریم؟
:پروژهاز سوال های اول یک
o کیفیت کد oسرعت توسعه oسرعت اجرا o نوظهورمفاهیم
ی ب ها
چارچوJS
کسی انتظار زیادی از وب سایت ها :نداشت
HTML
بظهور و
:رشد اینترنت
کسب و کارها عالقه بیشتری به نحوه ی به تصویر کشیده
شدن خود در فضای مجازی پیدا کردند
پشتیبانی مرورگرها JSو CSSاز
افزایش یافت
پیاده سازی های front-end
پیچیده تری را شاهد بودیم
Web Platform =
HTML + CSS +
JavaScript
oناسازگاری بین مرورگرها oهر روز مفاهیم جدید
http://www.tutorialspoint.com/html/html_layer_tag.htm
<layer id="layer1" top="250" left="50" width="200" height="200" bgcolor="red"> <H1>Layer 1</H1> <P>Lots of content for this layer.</P> <P>More Content for layer 1.</P> </layer>
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
http://en.wikipedia.org/wiki/DOM_events#Internet_Explorer-specific_model
http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords
http://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx
var xmlHttp = null; if (window.XMLHttpRequest) { // If IE7, Mozilla, Safari, and so on: Use native object. xmlHttp = new XMLHttpRequest(); } else { if (window.ActiveXObject) { // ...otherwise, use the ActiveX control for IE5.x and IE6. xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } }
SEO AJAX RWD etc.
Snippet, GIST, etc.
JavaScript Libraries
پیاده سازی برخی کارکردهای اولیه
cross-browserبا قابلیت استفاده مجدد و به شکل
رهایی از پیچیدگی های DOM برای انجام عملیات
متداول
پنهان کردن ناسازگاری های مرورگرها از چشم توسعه
دهندگان سرعت توسعه باالتر
UIهای کم هزینه تر AJAX
افزایش ترافیک وب سایت ها
crowd sourcing
Client-side
Binding
Model-driven Development(MDD)
Event-driven Development
Single Page Applications World-Class Web UX
JavaScript Frameworks
مرورگرها حتی در مورد مفاهیم پایه نیز
با هم توافق ندارند
پلت فرم وب برای رفع نیازهای مطرح شده توسعه داده نشده
استکدهای
جاوااسکریپت نوشته شده عمدتا نامرتب
!بودند
Snippet, GIST, etc.
JavaScript Libraries
JavaScript Frameworks
Martin Fowler
http://martinfowler.com/bliki/InversionOfControl.html
.کندیک مجموعه از توابع است که کاربر می تواند آنها را فراخوانی
.بازمی گرداندهر فراخوانی کاری را انجام می دهد و کنترل را به کاربر
!کنترل دست کاربر است
. دهدچارچوب مشخص می کند که کاربر کدهای خود را کجا و به چه شکل باید قرار
.می کندرا فراخوانی خود کدهای کاربر زمان های مورد نظر چارچوب در
!کنترل دست چارچوب است
مشکالت استفاده از چارچوب ها
oمی کنیم؟الیه های انتزاعی ایجاد چرا : سوال
oتا بتوان بدون درگیر شدن با پیچیدگی های یک چیز، از آن استفاده کرد.
o جاوااسکریپت الیه های انتزاعی روی پلتفرم وب هستندچارچوب های!
oDirective ها درAngularJS
oVirtual DOM درReact
o انتزاع ها نشتی دارنداما !
o می دهدشما را در معرض پیاده سازی زمینه ی خود قرار.
پیمایش سطری یا ستونی یک آرایه دو بعدی
می تواند کارایی متفاوتی .داشته باشد
اجرای دو پرسجوی که خروجی SQLمتفاوت
مشابهی باز می گردانند ممکن است از نظر سرعت تفاوت های فاحشی با هم
.داشته باشند
$timeout(function() { $scope.status.isSearching = false; $scope.status.searchResults = ...
setTimeout(function() { $scope.status.isSearching = false; $scope.status.searchResults = ... $scope.$digest();
http://blog.500tech.com/is-reactjs-fast/
مشکالت استفاده از چارچوب ها
http://github.com/angular/angular.js/issues/1202
مشکالت استفاده از چارچوب ها
به شکاندن بخش های یکپارچه و بزرگ کد
در اجزای متعامد که می توانند در هر ترکیبی
. گیرنداستفاده قرار کنار یکدیگر مورد
Web Components
.اضافه شده اند DOMو مشخصات HTMLبه W3Cمجموعه ای از ویژگی ها که توسط
به ما امکان می دهد ویجت ها یا کامپوننت های با قابلیت استفاده مجدد در برنامه های .وب ایجاد کنیم
. را به وب بیاوریم) CBSE(می توانیم با آن مهندسی کامپیوتر مبتنی بر کامپوننت
HTMLرا برای المان های -و در عین حال بر هم کنش -برای ما امکان محصورسازی .امکان پذیر می سازند
JavaScript Frameworks
Polyfill Web Components
o اضافه کردن کارکردهای خاصی که در مرورگرهای مدرن دیده می شود به
.مرورگرهایی که از آن کارکردها را به شکل توکار پشتیبانی نمی کنند
oبخشی از پلتفرم وب نیستند و محدود به جاوااسکریپت نمی شوند.
o کنترل را در دست نمی گیرند به عبارت دیگر چارچوب هایی نیستند که روش های
.خود برای توسعه روی وب را پیش بگیرند
var fruits = { banana: "yellow", strawberry: "red", pumpkin: "orange", apple: "red" }; var isRedFruit = function (name) { return this[name] === "red"; }; ["pumpkin", "strawberry", "apple", "banana", "strawberry"].filter(isRedFruit, fruits); // returns ["strawberry", "apple", "strawberry"]
ES5
if (typeof Array.prototype.filter !== "function") { Array.prototype.filter = function (fn, thisp) { if (this === null) throw new TypeError; if (typeof fn !== "function") throw new TypeError; var result = []; for (var i = 0; i < this.length; i++) { if (i in this) { var val = this[i]; if (fn.call(thisp, val, i, this)) { result.push(val); } } } return result; }; };
Polyfill VS Shim
o تعریف قطعه هایHTML می توانند توسط جاوااسکریپت بـه یـک سـند اضـافه که .شوند
o می توانیم محتوایی را نگهداری کنیم که زمان بارگـذاری صـفحه رنـدر نمی شـود امـا .می تواند بعد از بارگذاری صفحه توسط جاوااسکریپت از آن نمونه سازی شود
o اینکه استفاده مجدد از قطعه های کدHTML.
o کالینتمدیریت المان های درون صفحه را به فراخور نیاز کاربر در سمت.
o سندهای روشی برای الحاق و استفاده مجدد ازHTML در سندهایHTML استدیگر .
o می توان برای آنpolyfill نوشت.
o تنها اسناد نهHTML بلکهCSS وJS نیز می توانیم به یـک سـند را .وارد کنیم
o پـس . می شونداجرا پس از وارد شدن محتوا به صفحه اسکریپت ها .و نحوه ی اجرای اسکریپت ها قابل ردیابی استمحل
o ساماندهی کدها و نگهداری برایHTML، CSS وJS های مـرتبط بـه
.استهم در یکجا مناسب
oبه این روش می توان چسبندگی بین اجزای مختلف را کاهش داد.
o تگ های خود را ایجاد کنیددیگر می توانید.
o شما همیشه می توانستید تگ های خود را داشته باشید
o اما با استفاده ازCustom Elements می توان توابـعCallback
.متفاوتی را به المان تعریف شده منسوب کرد
o برای آن تعریف نمودو توابع دیگری را یا خصوصیات.
o المان هـای زیردرخت از امکان می دهد یک به مرورگرDOM بـه یـک را
.سند رندر شده که روی صفحه در حال نمایش است تزریق کند
o بدون اثرگذاری روی درختDOM سند اصلی.
o کنیدبه شما کمک می کند الیه ی نمایش سند را از الیه ی محتوا جدا.
top related