Skip to content

Commit

Permalink
https updated in seed file
Browse files Browse the repository at this point in the history
  • Loading branch information
puzansakya committed Feb 18, 2019
1 parent 94cef4c commit 3b59a04
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion seeds/5_articles.js
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ exports.seed = function (knex, Promise) {
"heading": "How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework",
"description": "Listen to those events and update the bound property with the new value from the event. All other elements bound to the same property will update automatically thanks to the proxy.",
"content": "<p>Have you ever asked yourself how a framework works?<\/p><p>When I discovered <a href=\"https:\/\/angularjs.org\/\" target=\"_blank\">AngularJS<\/a> after learning <a href=\"https:\/\/jquery.com\/\" target=\"_blank\">jQuery<\/a> many years ago, AngularJS seemed like dark magic to me.<\/p><p>Then Vue.js came out, and upon analyzing how it works under the hood, I was encouraged to try writing my own <a href=\"https:\/\/en.wikipedia.org\/wiki\/Data_binding\" target=\"_blank\">two-way binding system<\/a>.<\/p><p>In this article, I’ll show you how to write a modern JavaScript framework with custom HTML element attributes, reactivity, and double-binding.<\/p><p><br><\/p><h2>How does reactivity work?<\/h2><p>It would be good to start with an understanding of how reactivity works. The good news is that this is simple. Actually, when you declare a new component in Vue.js, the framework will <a href=\"https:\/\/vuejs.org\/v2\/guide\/reactivity.html#How-Changes-Are-Tracked\" target=\"_blank\">proxify each property<\/a> (getters and setters) using the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Proxy_pattern\" target=\"_blank\">proxy design pattern<\/a>.<\/p><p>Thus it will be able to detect property value changes both from code and user inputs.<\/p><p><br><\/p><h2>What the proxy design pattern looks&nbsp;like<\/h2><p>The idea behind the proxy pattern is simply to overload access to an object. An analogy in real life could be the access to your bank account.<\/p><p>For example, you can’t directly access your bank account balance and change the value according to your needs. It is necessary for you to ask someone that has this permission, in this case, your bank.<\/p><p>By overloading the <code>set<\/code> function, it’s possible to manipulate its behavior. You can change the value to set, update another property instead, or even not do anything at all.<\/p><p><br><\/p><h2>Reactivity example<\/h2><p>Now that you’re confident about how the proxy design pattern works, let’s begin writting our JavaScript framework.<\/p><p>To keep it simple, we’ll mimic the AngularJS syntax to do it. Declaring a controller and binding template elements to controller properties is quite straightforward.<\/p><p>First, define a controller with properties. Then use this controller in a template. Finally, use the <code>ng-bind<\/code> attribute to enable double-binding with the element value.<\/p><p><br><\/p><h2>Parse template and instantiate the controller<\/h2><p>To have properties to bind, we need to get a place (aka controller) to declare those properties. Thus, it is necessary to define a controller and introduce it to our framework.<\/p><p>During the controller declaration, the framework will look for elements that have <code>ng-controller<\/code> attributes.<\/p><p>If it fits with one of the declared controllers, it will create a new instance of this controller. This controller instance is only responsible for this particular piece of template.<\/p>",
"backdrop": "http:\/\/res.cloudinary.com\/dnammd7o9\/image\/upload\/v1549710423\/blog\/2019-02-09T11:07:02.171Z.jpg",
"backdrop": "https:\/\/res.cloudinary.com\/dnammd7o9\/image\/upload\/v1549710423\/blog\/2019-02-09T11:07:02.171Z.jpg",
"user_id": 3,
"category_id": null,
"created_at": "2019-02-09T11:07:04Z",
Expand Down

0 comments on commit 3b59a04

Please sign in to comment.