سید کاوه احمدی ابهری آیا هنوز به چارچوب های جاوااسکریپت نیاز داریم؟

:پروژهاز سوال های اول یک

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را برای المان های -و در عین حال بر هم کنش -برای ما امکان محصورسازی .امکان پذیر می سازند

http://webcomponents.org/

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 کنیدبه شما کمک می کند الیه ی نمایش سند را از الیه ی محتوا جدا.