Jekyll2021-09-12T19:06:48-04:00https://vadimbrodsky.com/feed.xmlvb. - Vadim Brodsky, web developerA passionate web developer based out of Waterloo, CanadaVadim Brodskyvadim@vadimbrodsky.comTop 7 reasons to try Vue.js in 20162016-08-25T00:00:00-04:002016-08-25T00:00:00-04:00https://vadimbrodsky.com/posts/top-7-reasons-to-try-vuejs<p>This past week I had the opportunity to work on my first project using <a href="https://twitter.com/youyuxi">Evan You</a>’s awesome creation. <a href="http://vuejs.org/">Vue.js</a>, is a reactive component based <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel">MVVM</a> JavaScript library for modern web interfaces. Wait, what? In plain English Vue.js is a small library that makes it <a href="http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/">painless to create interactive user interfaces</a> without worrying about all of the manual DOM manipulation and event listening. In spirit React comes close to what Vue.js is trying to achieve, build component based web user-interfaces. Letting you create the components and the data-flow and taking care of all the data-binding and DOM updates, this is what Vue calles “Reactivity”.</p>
<h2 id="1-easy-to-get-started">#1 Easy to get started</h2>
<p>What really drew me to Vue.js is how easy it is to get started, just <a href="http://vuejs.org/guide/installation.html">drop in the Vue.js library</a> before your closing <code class="language-plaintext highlighter-rouge"></body></code> tag and you are ready to go. There is no need to setup Gulp, Grunt or Webpack tasks to transpire JSX templates. There is no need in learning a new JavaScript variant like TypeScript. Everything just works by dropping a single JS library, this is how it used to be during the good-ol jQuery days <strong>shakes cane</strong>. But jokes aside, this simplicity is not a limiting–factor for bigger projects, you should still use good tooling, more on that later. This is, ladies and gentlemen, is how you counter <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.8nsprbdmw">JavaScript tooling fatigue</a> in 2016.</p>
<p>Approachability is not only on the surface of Vue.js, the design of the <a href="http://vuejs.org/api/">API</a> that it provides is very logical and simple. I was constantly surprised at how much functionality I was able to build in very little code. Vue.js uses plain JavaScript objects that it extends with additional properties, it just makes sense. It turns out that if you take out all of the DOM and event manipulation from your code what is left is your business logic.</p>
<h2 id="2-component-based">#2 Component Based</h2>
<p><img src="/assets/uploads/web-components-so-hot.png" alt="web components are so hot rightnow zoolander meme" /></p>
<p>At the core of Vue.js are components, small self-contained pieces of code that can be reused to build a large-scale application. I know, I know components are so hot right now. The way that <a href="http://vuejs.org/guide/overview.html#Component-System">Vue’s components</a> are defined and used are modelled after the W3C Custom Elements spec, which is part of the new <a href="https://www.w3.org/wiki/WebComponents/">Web Components Spec</a>. This means that using Vue.js and it’s component will be similar to native browser functionality in the future. In reality you get to define your components as custom HTML tags that Vue renders and into full-featured components. I think it fits remarkably well with the HTML markup paradigm. Making it easy to reason about the position and composition of the components in your application.</p>
<p><img src="/assets/uploads/single-file-component-in-vue.png" alt="example of a single file component in vue as seen from a code editor" /></p>
<p>A slightly more advanced feature but no less awesome feature of Vue.js components are <a href="http://vuejs.org/guide/application.html#Single-File-Components">Single File Components</a>, using tools like Vueify allow you to define the template, logic and styling of your component in a single file. No more context switching and jumping to different files to make a change to the style of your component. This feature reminds me of the work on the HTML Shadow DOM.</p>
<h2 id="3-solves-the-right-problem">#3 Solves the right problem</h2>
<p>On a theoretical level I feel that Vue.js solves the right problem for me, it does not replace your entire page with a SPA. You can use Vue as needed, on small sections of your site. This makes sense to me for the kind of projects I work on.</p>
<p><code class="language-plaintext highlighter-rouge"><hand-wavy-statement></code> <em>Let’s face it, most front-end developers are not working on Google or Facebook scale applications that require hundreds if not thousands of engineers to collaborate safely on.</em><code class="language-plaintext highlighter-rouge"></hand-wavy-statment></code></p>
<p>Vue.js does not force you into complex setup to define your app’s architecture and data-store. It allows you to just get started fast and add the features that you need as you need them.</p>
<h2 id="4-good-resources">#4 Good Resources</h2>
<p>The way I learn new technology is usually by watching videos, reading a book on the subject and trying out some small projects. At first with Vue, I stated with Jeffrey Way’s screencasts on <a href="https://laracasts.com/series/learning-vue-step-by-step">Laracast</a>, which offer a great introduction to Vue. Then I dove staring into a project.</p>
<blockquote>
<p>Sometimes the best tactic to get something done is to read the docs <a href="https://twitter.com/hashtag/awesomedocumentation?src=hash&ref_src=twsrc%5Etfw">#awesomedocumentation</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&ref_src=twsrc%5Etfw">#vuejs</a>, tweet by <a href="https://twitter.com/VadimBrodsky/status/768802734996873216?ref_src=twsrc%5Etfw">@vadimbrodsky</a></p>
</blockquote>
<p>In the beginning a little lost and slow, but then looking at the <a href="http://vuejs.org/guide/">official Vue.js guide</a> and documentation everything became very clear. Vue has very good documentation that makes it a breeze to understating how to use Vue.</p>
<p><img src="/assets/uploads/vue-awesome-list.png" alt="Vue Awesome list logo" /></p>
<p>Another important aspect of Vue.js development are the error messages, if you use the non-minified source code of the Vue library you will get nice descriptive error messages in your console.</p>
<p>More resources can be found on the <a href="https://github.com/vuejs/awesome-vue">awesome-vue</a> repository.</p>
<h2 id="5-awesome-tooling">#5 Awesome tooling</h2>
<p>Tool fatigue is a real thing in the JavaScript ecosystem, but to be more productive you need tools to get the job done. To my surprise Vue.js has a complete set of useful tools that will help you. It’s almost astonishing how much is already created by Evan and a small group of developer without corporate backing.</p>
<p>Some of the tools that caught my attention are <a href="https://github.com/vuejs/vue-cli">vue-cli</a> for quick scaffolding, <a href="https://github.com/vuejs/vue-router">vue-router</a>, <a href="https://github.com/vuejs/vue-resource">vue-resource</a> for making HTTP and Ajax requsts, <a href="https://github.com/vuejs/vue-validator">vue-validator</a> for data validation, <a href="https://github.com/vuejs/vuex">vuex</a> for flux-inspired architecture.</p>
<p><img src="/assets/uploads/vue-devtools.png" alt="screenshot of vue.js devtools in Chrome" /></p>
<p>But the tool I am using the most in my day to day development with Vue is the <a href="https://github.com/vuejs/vue-devtools">vue-devtools</a>. A Chrome extension that allows to inspect and interact Vue components, and it’s also written in Vue.</p>
<h2 id="6-minimal-overhead">#6 Minimal Overhead</h2>
<p>In light of the recent <a href="http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/">Leftpad debacle</a>, I was wary of un-needed dependencies in my projects. Vue.js does not disappoint in this department, it is designed to be light and had no third-party dependencies, wow! This is a clear win for Vue and this is what allows Vue to be improved bettering performance and keeping the API stable.</p>
<p>In addition Vue plays nicely without other libraries, need to bring in jQuery and Bootstrap. No problem Vue.js plays nicely with them, making the integration a breeze.</p>
<h2 id="7-future-facing">#7 Future Facing</h2>
<p>One of the biggest counterpoints I can see against Vue.js is the size of the team devoted to it. It does not have Facebook’s or Google’s coffers at it’s disposal to fund Evan’s time. And hey he is a guy, so the <a href="https://en.wikipedia.org/wiki/Bus_factor">bus factor</a> does not work in Vue’s favour. But Evan is taking stability very seriously, the Vue.js <a href="http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/">community is growing</a> and the <a href="https://medium.com/the-vue-point/the-state-of-vue-1655e10a340a#.oukvd6nrt">Patreon Campaign</a> is going strong.</p>
<p>There are many good things on the <a href="https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.7x1xc4vev">horizon for Vue</a>, the new release Vue 2.0 is now in RC sate and it offers many performance improvement with an implementation of a Virtual DOM. This change ought to bring up to a 4X performance improvement for Vue.</p>
<p>Anyhow, don’t take my word for it, go <a href="http://vuejs.org/">play around with Vue.js</a> to form your own opinion, let me know what you think.</p>Vadim Brodskyvadim@vadimbrodsky.comThis past week I had the opportunity to work on my first project using Evan You’s awesome creation. Vue.js, is a reactive component based MVVM JavaScript library for modern web interfaces. Wait, what? In plain English Vue.js is a small library that makes it painless to create interactive user interfaces without worrying about all of the manual DOM manipulation and event listening. In spirit React comes close to what Vue.js is trying to achieve, build component based web user-interfaces. Letting you create the components and the data-flow and taking care of all the data-binding and DOM updates, this is what Vue calles “Reactivity”.JavaScript Game Development — Where to Start?2016-03-05T00:00:00-05:002016-03-05T00:00:00-05:00https://vadimbrodsky.com/posts/javascript-game-development<p>This is the question that I have asked myself this morning. The JavaScript ecosystem is huge. But today I decided to experiment with something new, how about making something simple and fun — <em>oh I know a game</em>.</p>
<p><img src="/assets/uploads/pong.gif" alt="A slightly more advanced version of Pong" title="A slightly more advanced version of Pong" /></p>
<p>Usually before evaluating any technology choice it’s a good to have requirements in place to pick the right tool for the job (or the shiniest tool for the job). <em>Do you have requirements</em>, you ask, yes — Pong. I want to start with a simple prototype of Pong, because I have 0 game development experience (actually, not true I did build BlackJack, Tic-Tac-Toe and Rock Paper Scissors Spock Lizard games in Ruby).</p>
<h3 id="unity">Unity?</h3>
<p>The biggest player in the indie game development scene is <a href="https://unity3d.com/unity">Unity</a>, they offer an end-to-end tooling for the next AAA and indie game makers. But learning C# is not something that I have planned as my next learning topic. It looks like Unity also supports UnityScript which is like JavaScript but <a href="http://wiki.unity3d.com/index.php/UnityScript_versus_JavaScript">not exactly</a>. From my brief exposure to Unity feels a little too heavy handed, I just want to experiment.</p>
<h3 id="elm">Elm?</h3>
<p><img src="/assets/uploads/reactive-programming.jpg" alt="Use Reactive programming you must Yoda meme" /></p>
<p>Another option that I have considered is <a href="http://elm-lang.org/">Elm</a>, it’s an intriguing compile-to-javascript language that promises <em>0 runtime exceptions</em>. Some of the example do feature games: <a href="http://elm-lang.org/examples/mario">Mario</a>, <a href="http://elm-lang.org/examples/adventure">Adventure (Zelda)</a>, <a href="http://elm-lang.org/examples/pong">Pong </a>and others.</p>
<p>In addition Tobias Hermann offers many praises for the <a href="https://github.com/Dobiasd/articles/blob/master/switching_from_imperative_to_functional_programming_with_games_in_Elm.md">functional approach to game programming</a> in Elm. It’s also been that inspiration to things like <a href="http://redux.js.org/">Redux</a>. The Elm language is very interesting and I want to come back to it, but it looks like currently there is no set “Game Engine” or any other support library in Elm — everything is do-it-yourself.</p>
<h3 id="javascript">JavaScript?</h3>
<p><img src="/assets/uploads/blame-javascript.jpg" alt="I have no idea what I'm doing must blame javascript dog at computer meme" title="JavaScript the best language" /></p>
<p><em>Ok, ok so what about vanilla JavaScript you ask</em>. Unsurprisingly JavaScript has many libraries and game engines to choose from, <a href="http://html5gameengine.com/">HTML5 Game Engines</a> and this <a href="https://github.com/bebraw/jswiki/wiki/Game-Engines">Github Wiki</a> offer some choices. Did I mention choices, oh so many choices. After some research, primarily reading Reddit threads (yes, I know) and looking at the websites of the most popular frameworks (judging-a-frameworks-by-its-homepage™) I am considering these 3, no, 5 game frameworks:</p>
<ol>
<li><a href="http://phaser.io/">Phaser </a>—“A fast, fun and free open source HTML5 game framework”, looks like it has many features, ooh Opal support.</li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> — “2D webGL renderer with canvas fallback”, its fast?!</li>
<li><a href="http://createjs.com/">Create.js </a>— “A suite of JavaScript libraries and tools designed for working with HTML5”, not just games.</li>
<li><a href="http://craftyjs.com/">Crafty.js</a> —“A flexible framework for Javascript games”, looks small maybe simple too.</li>
<li><a href="http://gamequeryjs.com/">gameQuery </a>— “Javascript game engine for jQuery”, looks unmaintained and has a nice SteetFighter demo (unplayable) but hey, it’s jQuery.</li>
</ol>Vadim Brodskyvadim@vadimbrodsky.comThis is the question that I have asked myself this morning. The JavaScript ecosystem is huge. But today I decided to experiment with something new, how about making something simple and fun — oh I know a game.