Get More Done with Vue.js: Vue and Performance

Vue is fast

In this lesson, we’re going to look at a very important topic in the development industry today, performance. If you’re a front end developer, you should be concerned about performance when it comes to public facing websites. So how does Vue.js compare with other modern front end frameworks and what features does it have that we can take advantage of to improve performance in our webapps? Continue reading

Get More Done with Vue.js: You Can Do More with Vue

You can do more with Vue

My third lesson on Vue.js focuses on it’s flexibility. Vue is simple enough for you to start writing components with HTML and plain JavaScript. But Vue was also designed with flexibility in mind. This means you are not just limited to creating components with HTML and plain JavaScript. Vue has an official Webpack loader for Vue components called vue-loader that enables support for ES2015. If you prefer to use TypeScript, Vue has official type declarations for TypeScript for Vue core, as well as vue-router and Vuex. Continue reading

Get More Done with Vue.js: Get Things Done Faster with Vue.js

Get Things Done Faster with Vue.js

My second lesson on Vue.js is focused on it’s simplicity. I think one of the things that makes Vue.js very appealing is it’s simplicity compared to other front end frameworks. To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript. Anyone with these skills can start “building non-trivial applications within less than a day of reading the guide” (according to the documentation). So how does Vue’s simplicity compare with other popular front end frameworks? Continue reading

Get More Done with Vue.js: What is Vue.js?

What is Vue.js?

Welcome to my first lesson on Vue.js. This is the first post in a series on Vue.js that I will be posting over the next few weeks. This post is designed to introduce you to what Vue.js is and how it works. Let’s get started!

Vue is a framework for building user interfaces, similar in many ways to another JavaScript library called React. As UI frameworks go, Vue is designed to be simple and flexible with a heavy focus on performance. Because of this, Vue can be implemented incrementally. The core library of Vue is focused on the view layer only, so it can be easily integrated with other libraries or existing projects. One of the things that makes this possible is the size. Full-featured and minified Vue 2.0 with compiler included is only 23kb. However, Vue is also powerful enough, when used in combination with a tool chain and supporting libraries, to build full featured Single-Page Web Applications. Continue reading

npm and Small Focused Modules

A lot of discussion has been happening around npm and it’s vulnerabilities since one module being unpublished about a week ago caused problems for lots of developers and their teams. Sindre Sorhus, a prominent developer and publisher on npm, wrote about why he thinks we need small reusable modules, like the one that was unpublished last week. You can read his thoughts on this here. You should read the whole post, but here is a snippet that sums it up.

People get way too easily caught up in the LOC (Lines Of Code). LOC is pretty much irrelevant. It doesn’t matter if the module is one line or hundreds. It’s all about containing complexity. Think of node modules as lego blocks. You don’t necessarily care about the details of how it’s made. All you need to know is how to use the lego blocks to build your lego castle. By making small focused modules you can easily build large complex systems without having to know every single detail of how everything works. Our short term memory is finite. In addition, by having these modules as modules other people can reuse them and when a module is improved or a bug is fixed, every consumer benefits.

Strong versus Loose Typing in JavaScript

Being a long time JavaScript developer, I’m perfectly happy with the fact that JavaScript is loosely typed. I think the reason strong typing in JavaScript is gaining in popularity is because more and more developers are using JavaScript that are used to programming in strongly typed languages. So there’s no reason for me to use something like Typescript that adds static typing to the language. Anyway, I came across this quote from Douglas Crockford in his book, JavaScript: The Good Parts, which explains my feelings on the subject better than I can.

The fashion in most programming languages today demands strong typing. The theory is that strong typing allows a compiler to detect a large class of errors at compile time. The sooner we can detect and repair errors, the less they cost us. JavaScript is a loosely typed language, so JavaScript compilers are unable to detect type errors. This can be alarming to people who are coming to JavaScript from strongly typed languages. But it turns out that strong typing does not eliminate the need for careful testing. And I have found in my work that the sorts of errors that strong type checking finds are not the errors I worry about. On the other hand, I find loose typing to be liberating. I don’t need to form complex class hierarchies. And I never have to cast or wrestle with the type system to get the behavior that I want.

Support for old versions of Internet Explorer to be dropped—in 2016

Progress!

But all that is set to change under a new support policy announced today that is scheduled to take effect in about 18 months. Starting January 12, 2016, only the newest version of Internet Explorer for any given version of Windows will be supported. Older versions will cease to receive security fixes and other updates.

Once the new policy takes effect, Windows Vista and Server 2008 users must use Internet Explorer 9, and Windows 7 and Server 2008 R2 users must use Internet Explorer 11. Windows Server 2012 users must use Internet Explorer 10, while Windows 8.1 and Windows Server 2012 R2 users must have Internet Explorer 11.

via Support for old versions of Internet Explorer to be dropped—in 2016 | Ars Technica.

Start a dev server to preview your work without Yeoman

I published these notes on GitHub as a Gist recently, but I’ll go ahead and post them here too. It pertains to starting a dev server to preview your work quickly without using Yeoman. Yeoman is nice for doing this, especially using LiveReload, but you may need this and not always have the ability to use Yeoman or may not think it’s worth installing it just for that. Regardless, here’s how to preview your work on a dev server without Yeoman, using Ruby, Python or Node.js.

Requirements

Mac OS: Ruby and Python are pre-installed. Install Node.js.

Windows: First install Ruby, Python or Node.js

Ruby

Install the asdf gem.

gem install asdf

Change to the directory you want to host and type asdf from the terminal or command prompt.

Navigate to http://localhost:9292/ in your browser to preview your site.

Python

Change to the directory you want to host and type python -m SimpleHTTPServer 8080 from the terminal or command prompt.

Navigate to http://localhost:8080/ in your browser to preview your site.

Node.js

From the terminal or command prompt, type npm init and answer the questions from the prompts to create a package.json file.

Type npm install --save express to install express as a dependency and update your package.json file.

Create a JavaScript file called server.js and save it with the following contents.

var express = require('express'),
app = express();

app.use( express.static( __dirname + '/public' ) );

var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});

Put the files you wish to preview in a directory called public, and type node server.js from your parent directory.

Navigate to http://localhost:3000/ in your browser to preview your site.