Node.js reached new milestones in 2017

The Node.js company NodeSource is releasing a Node by Numbers 2017 analysis to look at the growth and adoption of the JavaScript project. Node.js is a JavaScript runtime that features an event-driven, non-block I/O model.

“By all measures, 2016 was a fantastic year for Node.js – and 2017 was even better. Metrics across the board show growth and expansion of the platform,” according to the report.

2017 saw three supported long-term support releases: Node.js 4.x (“Argon”), Node.js 6.x (“Boron”), and Node.js 8.x (“Carbon”), making it the first time in history the project has had three supported LTS release lines. “From this point on, unless something changes in the way Node.js LTS releases are managed, we will always have three actively supported LTS release lines when Node by Numbers rolls around,” the NodeSource team wrote in a post. “This means that 2017 is the first time we’ll be seeing the dynamics of adoption and movement from one Node.js LTS release to another—giving the project, maintainers, and end-users better insight into which versions are most supported and most relied upon.”

The most popular download was and continues to be Node.js 6 despite Node.js 8’s upward trend. Node.js LTS usage saw a downward trend last year.

Additionally, the project reached a new milestone in its amount of downloads. For the first time, the project saw one million downloads in a single day last year. Another key finding included a 63 percent increase in the total number of new contributors.

Some anomalies the company saw in Node last year included: a jump in Russian downloads, an uptick in Node.js 9 downloads, and a spike in Node.js 7 downloads from April to May.

“Year over year, Node.js continues to succeed and grow. Credit for this growth is deserved across the board: to the countless hours that individuals contribute to the project to help build it, to the hundreds of thousands of modules that JavaScript developers have published, and to the developers who use it on a daily basis for everything from Enterprise-grade IoT to rapidly building out basic MVPs,” the team wrote.

GitHub Project of the Week: Aurelia

The Aurelia team has announced big ambitions to add new features and platform capabilities in 2018. Aurelia is an open source, next generation JavaScript client framework for web, mobile and desktop.

The team announced plans to add support for server-side rendering, enhance the project’s UX, provide strong compatibility for web components, address sing-file component development and handle state in larger apps better.

Throughout 2017, the team introduced the Aurelia validation plugin, added 11 components to the UX, released the Aurelia Inspector for Chrome and made advancements to the VS Code plugin.

The UX library will get a lot of focus this year, with the team working on its application layout, styling, and adding more components.

In addition, the team announced Aurelia 2.0 or 3.0 is on the horizon. “We’ve been thinking hard about what we want to do for the next major version of Aurelia. One thing that’s important to us is that, even though it’s a major version change, we want to keep the APIs and programming models as close as possible to what they are today. We’re proud of the stability we’ve created in the Aurelia ecosystem and we want to maintain that as much as possible, even across major versions,” the team wrote.

The next major version will focus on restructuring some of the project and providing a more modern development workflow as well as supporting TypeScript, a monorepo project structure, and releasing the Aurelia NPM scope.

Top 5 trending projects on GitHub this week: 

  1. Wechat jump game: A game to help you learn Python! (I think, the description was in Chinese).
  2. Computer science: A repo that sets you on the path to a free, self-taught computer science education.
  3. StimulusA JavaScript framework for HTML.
  4. UppyAn open source file uploader for web browsers.
  5. GitHub profile summaryTools that allow you to visualize GitHub profiles and view repos for language, stars per language, commits per language, etc. etc.
NodeSource announces $17.5 million round of funding

The Node.js company NodeSource is celebrating the holidays with a new round of funding announced today. In a series B funding, the company raised $17.5 million. The money will be used towards the company’s engineering, support and global go-to-market teams.

This brings NodeSource’s total amount raised to $33.4 million since 2014. “Our Node.js solutions are powerful tools for enterprises that need to run mission-critical applications on JavaScript,” commented NodeSource founder and CEO Joe McCann. “The market potential is significant, and this Series B investment from our partners at Crosslink Capital, Industry Ventures, Silicon Valley Bank and RRE Ventures further validates the strategy behind N|Solid and NodeSource Certified Modules (NCM), which is all about empowering organizations to successfully adopt, operationalize and scale Node.js to drive digital transformation initiatives.”

NodeSource is known for its enterprise Node.js solutions. Node.js is a open-source, cross-platform JavaScript runtime environment. The company’s flagship product N|Solid provides security, performance and extensibility for Node.js.

“NodeSource remains dedicated to delivering enterprise-grade solutions in support of a sustainable ecosystem for the open source Node.js project; and will continue to focus on enabling adoption of Node.js at scale through best-in-class solutions. I look forward to the growth and innovation this Series B funding will make possible in the coming years,” McCann wrote in a post.

The round of investment was provided by Silicon Valley Bank, Industry Ventures and existing investors Crosslink Capital and RRE Ventures.

 

Visual Studio Live Share gives you pair programming without the shared keyboards

Decades after introducing IntelliSense, the code completion and information features that transform Visual Studio into something more than just a text editor, Microsoft is introducing something that it claims is just as exciting: Live Sharing.

Collaboration is critical for many developers. Having another pair of eyes look over a problematic bug can offer insight that’s proving elusive; tapping the knowledge of a seasoned veteran is an important source of training and education. Some developers advocate pair programming, a system of development where two people literally share a keyboard and take turns to drive, but most feel this is intrusive and inconvenient. Ad hoc huddles around a single screen are common but usually mean that one developer has to contend with the preferences of another, hindering their productivity. Screen sharing avoids the awkward seating but also means that the sharer either has a loss of control if they give the other person keyboard and mouse access, or, if they don’t, it prevents the other person from taking the initiative.

Live Share is Microsoft’s solution. It provides a shared editing experience within Visual Studio and Visual Studio Code (currently only for JavaScript, TypeScript, and C#) that’s similar to the shared editing found in word processors; each person can see the other’s cursor and text selections; each person can make edits—but it goes further, by enabling shared debugging, too. A project can be launched under the debugger, and both people can see the call stack, examine in-scope variables, or even change values in the immediate window. Both sides can single step the debugger to advance through a program.

It provides rich collaboration—while still allowing both developers to use the environment that they’re comfortable and familiar with. If you prefer to use Visual Studio, with your windows laid out just so, and still use the same key bindings as you learned for Visual C++ 6 back in the ’90s, you can do so, and it doesn’t matter that your peer is using Visual Studio Code on a Mac, with (ugh) vim key bindings. With Live Share, you just send a sharing request to your colleague and they can connect to your project, editor, and debugger from the comfort of their own environment.

The feature will be released as a preview for Visual Studio Code and Visual Studio at some unspecified point in the future, using a combination of updates to the core programs and extensions to round out the functionality. Microsoft stresses that the preview is still at an early stage. Technically, it allows multi-way collaboration (not just pairs), though this may not be enabled initially. At some point it will allow direct connections between systems on the same network, but, initially, it may require sharing activity to bounce through a Microsoft server.

Even at this early stage, however, it looks tremendously useful and like a huge step forward in collaboration and productivity.

Building a better dev ops platform

More immediately, today marks the general availability of Visual Studio App Center (formerly Mobile Center), Microsoft’s one-stop shop for mobile application deployment and testing. Point App Center at your source repository (hosted on Microsoft’s Visual Studio Team Services (VSTS) or GitHub), and it will fetch the code, set up build scripts, and run unit and integration tests.

That’s standard continuous integration stuff, but App Center goes further: it can run your application tests on real hardware, both iOS and Android, to span dozens of different screen size and operating system combinations. You can even see screenshots of the app running on the various different makes and models of handset.

Once your application is passing its tests, App Center has a beta deployment system so that you can roll it out to beta testers. Need to make a quick fix to address a bug? If your app is written in JavaScript, you can use Code Push to send updated scripts to your users without needing to do a full build and reinstall. This works even for stable builds that have been submitted to their respective app stores; you can patch live applications, and we’re told that Apple and Google will allow this as long as the patches aren’t too radical.

App Center lets you test across a whole bunch of devices at the same time. Notice how the first three phones have crashed out to the desktop because of a bug in the app being tested.

 

Even after a successful beta test, you’ll probably want to collect crash and analytics data from your users to discover problems and better understand how they’re using your application. App Center has tooling for that, too.

Microsoft’s goal with App Center is to make it easy for developers to adopt best practices around building, testing, reporting, and so on; App Center is a one-stop shop that handles all of these for you. Under the covers it uses VSTS. This means that if your needs grow beyond what App Center can do—for example, if you have server-side code that needs to have its builds, testing, and deployment synchronized with the client-side code—you can use the same workflows and capabilities in the full VSTS environment, while still retaining access to everything App Center can do.

Of course, you still have to develop applications in the first place. Microsoft is continuing to try to make Visual Studio the best place for app development regardless of platform. Live Player, shown earlier this year at Build, greatly streamlines the develop-build-debug loop for app development by pushing your application code to a device (iOS or Android) instantly, letting it run without needing to deploy an updated app package each time.

This is particularly compelling for honing user interfaces. Interfaces written in XAML, Microsoft’s .NET interface markup language, can be shown in Live Player, and they update live; as soon as you save the XAML changes, the UI shown on the device updates accordingly. You don’t even need to navigate to a particular screen within the application to test it; you can have Live Player simply show arbitrary XAML files. This makes developing and testing interfaces substantially less painful.

Increasing the reach of machine learning

Microsoft also announced Visual Studio Tools for AI, a range of features to make developing machine learning applications within Visual Studio easier. With this tooling, Visual Studio will be able to create projects that are already set up to use frameworks such as TensorFlow or Microsoft’s own CNTK.

Machine learning systems build models that are generated by large-scale training, with the training done on clusters and often accelerated with GPUs or dedicated accelerator chips. The models produced can then be run on client machines. A model that’s used for, say, detecting faces in video streams will still need a powerful client, but much less so than the hardware needed for the initial training.

This model training is thus a good fit for cloud computing. The Tools for AI integrate with Azure’s Batch AI Service, a managed environment providing a GPU-accelerated training cluster. Training jobs can be submitted from within Visual Studio, and progress can be tracked there, too, giving insight into things like the level of GPU utilization.

Once a model has been built, there are now new ways of deploying it to devices. Microsoft has been talking up this notion of the “intelligent edge” as a counterpart to the “intelligent cloud;” this means pushing the machine-learning models into edge devices to make use of the local processing power where it makes sense to do so. A new framework, the AI Toolkit for Azure IoT Edge, is intended to streamline that process.

The company also announced a preview of Azure SQL Database Machine Learning Services, which allows machine learning models to be deployed into a SQL database and accessed directly. An example use case of this is a support ticketing system. A machine learning model could be generated to infer a priority for each ticket so that issues that seem to be urgent are prioritized automatically. With the new Azure services, this model can be run directly within the SQL database.

As much as Microsoft and other companies have been talking up machine learning, it is for many developers something of an unknown. While high-level systems such as Cognitive Services don’t require much knowledge of the details of machine learning—they use prebuilt, off-the-shelf models, making them quick and easy to start using—developers who want to create their own models will need to learn and understand new frameworks and techniques.

Microsoft’s attempt to fill that knowledge gap is its AI school. As it builds up its range of systems and capabilities, it hopes that more accessible machine learning will turn up in more places.

Source: arstechnica.com

Node.js 9 released as version 8 enters long-term support

The Node.js Foundation announced the release of version 9 of the Node.js JavaScript runtime today, while Node.js 8 is going into long-term support.

The community-driven, open-source library has seen use in enterprise applications, robotics, API toolkits, serverless apps, mobile websites and others, according to the foundation, and long-term support means companies should begin migrating to version 8.

The foundation says version 8 was one the biggest releases from the platform’s community, bringing 20% faster performance in web apps than the previous version 6.

“A top priority for enterprises is to ensure applications are performant. New features like HTTP/2 and the latest V8 JavaScript Engine deliver the performance global organizations require to run their business at scale,” said Mark Hinkle, executive director of the Node.js Foundation. “Node.js builds are growing faster than ever thanks to the long-term support strategy, and the large and active community that includes 13 working groups, 21 members of the Technical Steering Committee, and more than 1,600 contributors to Node.js united under the Node.js Foundation.”

Updates in Node.js 8 bring V8 JavaScript Engine 6.1 and HTTP/2 support on board, along with updates to the Node.js API allowing for better stability and future-proofing for backwards compatibility, which the Node.js Foundation says moves it towards VM neutrality and opening Node.js to more environments, like IoT and mobile.

Other Node.js 8 features include a stable module API, async / await support for writing more linear code, and the V8 JavaScript Engine 6.1.

While Node.js 9 is available, the foundation says that it’s geared more towards testing and experimenting with bleeding-edge features and recommends Node.js 8 for ongoing development.

Angular 5.0 now available

The Angular development team today announced a major release to the mobile and desktop framework. Angular 5.0 focuses on making Angular “smaller, faster, and easier to use.”

The new release includes the new build optimizer that will run by default when production builds are created with the CLI. The tool is designed to make bundles smaller. “The build optimizer has two main jobs. First, we are able to mark parts of your application as pure,this improves the tree shaking provided by the existing tools, removing additional parts of your application that aren’t needed,” the team wrote in a post. “The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.”

Angular 5.0 also enables users to share application state between server side and client side versions of the app with the Angular Universal State Transfer API and DOM support.

Angular Universal enables developers to perform server side rendering on their Angular apps.

The version’s ServerTransferStateModule and the corresponding BrowserTransferStateModule enable users to generate information about their rendering with platform-server and transfer it to the client side without having to regenerate the information. This is useful when users perform application fetches data over HTTP.

In addition, the release features compiler improvements to support incremental compilation, speed up rebuilds and ship smaller bundles. Some compiler improvements include TypeScript transforms, ability to preserve whitespace from components and applications, and improved decorator support.

Other features include new router lifecycle events, RxJS 5.5, updateOn Blur / Submit capabilities in Angular Forms, CLI v1.5, zone speed improvements, and a new  HttpClient.

Information on how to update to version 5.0 is available here.

Microsoft lays out plans for VS Code in 2018

Microsoft is already planning for Visual Studio Code’s future with a new roadmap and focus areas for 2018. The company plans to tackle VS Code from three perspectives next year: happy coding; Node, JavaScript and TypeScript; and a rich extension ecosystem.

For “happy coding,” the team wants to make the code editor more pleasant to work with by making it more flexible when working with position editors and panes, multi-selection and supporting multi-root workspaces. “You will see a significant focus on the fundamentals in the next few months as well, focused on performance, localized language support, and accessibility so that every developer can be productive with VS Code,” the team wrote on the roadmap. Fundamentals will include: improved startup performance, memory consumption, accessibility, language support packs, Windows update experience, and serviceability.

The team will also continue to update the editor to support the best code editing, navigation, and understanding experiences for TypeScript and JavaScript. In addition, it will make it easier to configure debugging of Node based applications and support client and server side debugging. Other language improvements include refining the Language Server Protocol; improving the debug adaptor protocol; enhancing JavaScript discoverability; and working with the TypeScript team.

“Of course, VS Code is not just a Node, JavaScript, and TypeScript tool. Our rich extensibility model and extension ecosystem means that you can install support for just about every language and framework, from C++ to C# to Go, Python, and more,” the team wrote.

Other updates on the horizon include improving the extension recommendation system, improving extension searching, simplifying the ability to track down issues, showing users more information about extension usage, and enhancing the language API.

The full roadmap is available here.

Security vulnerabilities in JavaScript libraries are hard to avoid

These days it is almost impossible to develop in JavaScript without utilizing one of the thousands of open-source JavaScript libraries available. Libraries make coding in JavaScript simpler and more efficient by taking processes that would ordinarily require several lines of code to achieve and simplifying them, usually by creating a single function that can be called.

These benefits do not come without risks, however. JavaScript libraries can have security flaws that can make a website using them vulnerable. According to a study conducted by Northeastern University, “more than 37% of websites use at least one library version with a known vulnerability.”

Common security vulnerabilities within JavaScript include cross-site scripting, cross-site request forgery, and buffer overflows. Cross-site scripting allows attackers to inject malicious code into trusted web pages, which then serve that malicious code to users that view the site. Cross-site request forgery allows attackers to utilize a user’s browser to take actions on other sites. Buffer overflows occur when attackers send data that is too large for the buffer to hold, resulting in data being written outside of the buffer and allowing attackers to insert malicious code, corrupt data, or crash an application.

“The JavaScript ecosystem does not have a robust framework for documenting vulnerabilities within libraries and documenting their effect,” Arnal Dayaratna, research director at IDC. There is no cohesive list of known vulnerabilities that is available for developers to access. JQuery vulnerabilities show up on the CVE website, which is a directory of common security vulnerabilities. However, Angular does not show up on the CVE; it instead uses GitHub CHANGELOG to report security vulnerabilities. Every library handles security information differently, therefore developers cannot rely on a single location to get updated.

According to an npm blog post, “It’s common for a modern JavaScript project to depend on 700–1200 packages.” Therefore, it is not practical for developers of these larger-scale projects to be looking online for announcements of vulnerabilities. This is where software composition analysis tools become necessary and extremely helpful.

Software composition analysis tools analyze your code and are able to pick out components that are vulnerable. This speeds up the process of detecting vulnerabilities from your site as well as reducing the risk of human error. “Most of the companies that offer software composition analysis tools offer proactive alerting so you don’t even have to be watching it,” says Amy DeMartine, an analyst at Forrester. “They’ll tell you when a new vulnerability gets announced for a version of a component you’re using.”

The Northeastern University study found that the median website in its dataset used a library version that was “1,177 days older than the newest release.” Switching to a newer version takes time because testing needs to be done to ensure the newest version is compatible with the existing application or site.

Constantly updating to newer versions of libraries could prevent developers from putting their time into new projects, but not keeping current sites free from vulnerabilities is also problematic.

If you have a vulnerable site, people are going to stop visiting it, Dayaratna claims. This will cancel out any cost-savings you gained from not updating your site properly.

A Comparative Study of Progressive JS Frameworks: Angular.js & Vue.js

Vue.js, the open source JavaScript framework, helps build beautiful web interfaces. Its excellent features can be strongly leveraged when it is paired with other web tools. Nowadays, many developers are replacing Angular.js and React.js with Vue.js.

This brings us to the topic of the article — should I go for Vue or Angular? In this article, we attempt to discuss these two frameworks and make a comparison based on which you can make a favorable decision for your project.

Vue.js, the brainchild of an ex-Google employee, Evan You, was released in 2014 and has already gained more than 57,000 GitHub stars in its kitty. Many developers vouch for Vue because it is very easy to learn. If you have strong fundamentals in HTML, CSS and JavaScript, then learning Vue.js is just a matter of hours.

What makes Vue attractive to developers is that it is fresh, lightweight and comes with little or no complexities. Though Vue is extremely flexible and simple, it is very powerful and offers two-way data binding feature, just like Angular and Virtual DOM feature like React.

Being less opinionated, Vue lets you structure your app in whichever way you want it. Angular doesn’t let you do that because you will have to do many things the “Angular way”.

Upwork, Netflix, Freelancer, Paypal, Lego and iStock Photo are examples of Angular.js apps. Collate and Remote Pad GUI are examples of apps made with Vue.js

Vue.js — the Versatile JavaScript Framework

Being a cross-platform, highly progressive framework, Vue becomes the first choice for many developers who need to develop single page applications. In the typical MVC architecture for developing web applications, Vue acts as the View, meaning it lets you see display portions of the data. Vue has a number of features apart from the basic ones mentioned above.

Let’s look at those:

1. Easily Adoptable

If you have been using some other framework, then you can easily adopt Vue because the core library is focused on the view layer, and you can easily pick it up and integrate it with third party libraries to use with existing projects.

2. Lightweight

As it focuses mainly on the ViewModel or the two-way data binding, Vue is lightweight, with fairly basic docs. And Vue is an interface layer, meaning you can use it as a light feature in pages, providing a better option than full-blown SPA.

3. Lower Learning Curve

Developers working with HTML will find that Vue has a low learning curve. This makes it perfect for less experienced developers and beginners to learn and understand Vue quickly.

4. Two-Way Binding

Vue provides the v-model directive (for updating data on user input events) that makes it easy to have a two-way binding on form inputs and texture elements. It can choose the right way to update the elements with regards to the input type.

5. Virtual DOM

The performance factor of Vue is slightly elevated due to its lightweight virtual-DOM implementation, based on Snabbdom. This is one of the main new features of Virtual DOM and makes computation inexpensive because you can directly make the updates. When you need to make the changes in the actual DOM, you can use the function that does it just once.

6. HTML based Template Syntax

This allows you to directly bind the rendered DOM to the underlying Vue instance’s data. This is a useful feature because it lets you extend the basic HTML elements to save reusable codes.

Angular.js — the Dynamic JavaScript Framework

Angular.js is a full featured Javascript framework that supports Model-View-Controller programming structure and is perfect for building dynamic, single page web apps.

Developed and supported by Google in 2009, Angular.js contains a library of JS code based on standard JavaScript and HTML. Angular.js was initially a tool that enabled designers to interact with both backend and frontend.

Some of the best features of Angular.js are:

1. Model-View-ViewModel (MVVM)

For building client-side web applications, Angular.js incorporates basic principles behind the original MVC software design pattern. However, it does not implement the MVC, in what we know in the traditional sense, but rather in an MVVM or Model-View-ViewModel pattern.

2. Dependency Injection

Angular.js comes with a built-in dependency injection subsystem feature that makes an application easier to develop and test. Dependency Injection allows you to get the dependencies by asking for it, rather than searching for it. This is greatly helpful to the developer.

3. Testing

Separate unit testing for controllers and directives is possible in Angular.js. And it allows the developers to do an end-to-end and unit test runner setup, which means you can test from the user-perspective as well.

4. Cross-browser Compliant

An interesting feature of Angular.js is that the applications written in the framework works well in multiple browsers. Angular.js can automatically handle the JS code required for each browser.

5. Directives

Directives (DOM template for rendering instructions) like elements, attributes, css can be used to create custom HTML tags. These are markers on DOM elements as you can extent the directive vocabulary and make your own directives, or convert them into reuse components .

6. Deep Linking

As Angular.js is mainly used for making single page applications, you have to make use of the Deep Linking feature to allow you to load sub-templates on the same page. The purpose of deep linking is to look at the location URL and arrange for it to map to the current state of the page.

The deep linking feature does this by setting URLs by looking at the state of the page and taking you to the specific content rather than traversing the application from the home page. Deep linking allows web applications to be easily searched by all the major search engines.

Vue.js vs. Angular.js — Which is the Best?

Now, comes the million dollar question. Which is the best out of the two — Angular.js or Vue.js? Let’s go deeper into this by looking at the following factors:

Learning Curve

As already mentioned before, Vue.js is relatively simple to learn and understand than Angular.js. You need time to get used to Angular. Developers are of the opinion that they are both great for projects, but most of them like to use Vue because it is simpler and scales really well when you add Vuex to the project.

Though a few of the syntaxes of Vue and Angular are similar, like API and design (this is because Vue was actually inspired from Angular.js in its early stages of development), Vue has endeavored to improve itself in areas where developers find it difficult with Angular.js. You can build a non-trivial app with Vue.js in a few hours; this is not possible with Angular.js.

Flexibility

Angular.js is opinionated, it actually gives strong opinions on how your app should be structured, Vue is gentler, and offers a modular, flexible solution for creating apps.

Vue is probably considered a library instead of a framework. By default it doesn’t come with a router, http request service, etc. You have to install the “plugins” that you want. Again, very flexible and also compatible with most libraries you may want to use.

Developers who don’t like to listen to opinionated frameworks gladly adopt Vue for their projects. However, there are developers who prefer to choose Angular.js because they prefer a support in order to make decisions on the overall structure of their apps. This would help them save time for coding.

Document Object Model (DOM)

With the minimal amount of components for re-rendering, Vue lets you precompile your templates to pure JavaScript. This virtual DOM allows for massive optimisations. This is the major difference between the two. Vue allows for simpler programming model, while Angular.js manipulates DOM in a cross-browser compatible way.

Speed/Performance

While both Angular JS and Vue delivers comparable performance, we can say that Vue is slightly ahead, thanks to its lighter-weight Virtual DOM implementations.

The simpler programming model enables Vue to provide a better performance and hence, it emerges the winner. Vue can be used without the build system as you can just include it into the HTML file. This makes Vue approachable, thereby improving its performance.

The reason why Angular.js becomes slow is that it uses dirty checking, a concept of digest cycle that comes as a loop in which the Angular.js monitors continuously to see if there are any changes to the variables. It is a change detection technique.

Two-way Data Binding

Both frameworks supports two-way data bindings equally, but Angular.js is more complicated because of its heavy weight nature when compared to Vue.js. The two-way data binding is much simpler in Vue, while in Angular, it is way down.

When to Choose Vue.js

Developers looking to kickstart their career by making products in the easiest way, can choose Vue. This would be a more helpful option if your Javascript basics are not too strong or if you are dogged by strict deadlines.

It is also a good idea to choose Vue if your front end is Laravel because the Laravel community considers Vue to be their most preferred framework. It cuts the total process time by 50% and free up space on the server.

The thing with Angular is that it requires using Typescript because all the documentation and learning resources are TypeScript based. Of course, Typescript is a good option when you are creating large-scale applications and you can achieve greater productivity when your Java and C# background is very strong.

But this wouldn’t be a good choice for small-scale uses because it could lead to more overhead costs. Using Angular without Typescript can be virtually impossible. In such cases, the obvious choice would be Vue, and you also have the added advantage of using Typescript with Vue through official typings and official decorator.

You can also choose Vue if you like your freedom while structuring your application because Angular has some strong opinions and offers official support for a number of build systems.

If you have familiarity with just Es5 Javascript and HTML, then you can go ahead with your project using Vue, but Angular entails that you familiarize with several concepts before becoming productive.

Using the standalone version of Vue would be good if you want to compile the templates in the browser and developers go for it for its simplicity- there are no file formats of special build steps. But it could affect performance a tad bit. However, kindly note that the first component render would be longer than the rest of the process because the template would have to be compiled to JS first.

Vue single-file components are perfect if you are looking to build performance critical SPAs or need features scoped CSS.

When to Choose Angular.js

Your first choice would be Angular.js if the aim is to build large and complex application because it offers complete and comprehensive solution for client-side app development.

Angular is a viable option for developers looking to deal with client side and server side modes. The main reason devs like Angular.js is that they get to focus on any kind of design with any JQuery-call or DOM configuration distractions.

Angular.js would also be good for developers creating heavy web applications with several components and complex requirements. When you choose Angular, native developers find it easier to understand the application functionality and coding structure.

You can also go for Angular if you want to choose the existing component in a new project because all you need to do is copy and paste the codes.

Angular.js would help you considerably through its two-way data binding feature as it manages the synchronization between DOM and the model. This makes it a more beneficial tool for web app development.

Developers looking to make lighter and faster web applications can make use of the MVC structure in Angular and separate logic and data components. Thus, it speeds up development process.

It is also worth mentioning that Vue’s companion libraries for routing and state management are officially supported and updated with the core library. But this is not so with Angular, because the community manages these libraries, leading to more fragmented ecosystem.

Comparison of the Codes of Vue.js and Angular.js

It’s interesting to analyse the codes of both the frameworks. The codes containing markup, style and behavior can help you compose highly efficient reusable interfaces. In Angular, entities like controllers and directives are contained in the module, while in Vue, the module contains the component logic.

Vue Components

Vue.extend({
data: function(){ return {…} },
created: function() {…},
ready: function() {…},
components: {…},
methods: {…},
watch: {…}
//(other props excluded)
});

Angular Modules

angular.module(‘myModule’, […]);

Directives are more powerful in Angular.js. They mean a lot; similar to the function of a component in Vue.js.

Vue Directives

Vue.directive(‘my-directive’, {
bind: function () {…},
update: function (newValue, oldValue) {…},
unbind: function () {…}
});

Angular Directives

myModule.directive(‘directiveName’, function (injectables) {
return {
restrict: ‘A’,
template: ‘<div></div>’,
controller: function() { … },
compile: function() {…},
link: function() { … }
//(other props excluded) };
});

As Vue.js was inspired from Angular.js, the former has borrowed the latter’s templating syntax. Hence the syntax for loops, interpolation and conditionals are all very similar. However, templating for both is very easy.

Look at the code snippets given below:

Vue Interpolation

{{myVariable}}

Angular Interpolation

{{myVariable}}

Vue Loops

<li v-repeat=”items” class=”item-{{$index}}”>
{{myProperty}}
</li>

Angular Loops

<li ng-repeat=”item in items” class=”item-{{$index}}”>
{{item.myProperty}}
</li>

Vue Conditionals

<div v-if=”myVar”></div>
<div v-show=”myVar”></div>

Angular Conditionals

<div ng-if=”myVar”></div>
<div ng-show=”myVar”></div>

Credits: Fadeit

However, the coding of Vue.js makes page rendering very easy and it beats both Angular and React on this count.

The fact is that Vue.js is more like a library than a framework, so it does not provide all the functionalities of Angular.js. You will have to rely on third party codes for Vue.js, while Angular provides features like HTTP request service or router.

You can try mixing and matching the libraries as you go. If you are used to Angular.js, then you may not be comfortable with Vue because it doesn’t tackle the challenges that is already covered in Angular.js.

Before winding up, let’s take a quick look at Progressive Web Apps or PWAs.These are nothing but websites, or rather web pages, that utilizes the most modern web technologies like service workers and web app manifests to give the user an app-like experience. PWAs are, more or less, hybrid apps that present the user with the benefits of both mobile web apps and native mobile apps.

Ionic is the most popular JavaScript framework used to create Progressive Web Apps. It not only builds PWAs, but also deploys the app in the native app store through Cordova. The combination of Ionic and Angular.js along with HTML5, CSS3 and Cordova, works magic by delivering the best quality PWAs.

Version Releases of Angular.js and Vue.js

The latest stable version of Vue.js, v2.3.4, got released on June 8, 2017. Prior to this release, there were 13 other versions that were released this year starting from version 2.1.9.

Angular 4 was released in March 2017. The earlier versions are Angular 1 and 2; there is no Angular 3. Version 5 of Angular will be released during September/October 2017 months. Version 6 in March 2018 and Version 7 is expected in September/October 2018.

Conclusion

Vue.js is lightweight, and behaves like the fitter little brother of Angular.js, making it a better option if you want a less opinionated framework. And just like a big brother, Angular.js shows you the way to build complex, yet good quality apps.

So, ultimately, the answer to which is the perfect tool boils down to the nature of your project and your learning capability. But, nevertheless, both these JavaScript frameworks can yield the best results for your app development.

User experience remains front and center for web application developers

In baseball, it’s three strikes and you’re out. In this age of app fatigue and digital transformations, the rules of America’s favorite pastime don’t apply to web application development. For most brands and enterprises, they have seconds to delight a user or they are skipping out of the ball park and onto the next competitor. Because for web app users today, having a fantastic application isn’t enough — if it doesn’t exceed their expectations in terms of performance, accessibility and responsiveness, you’re out.

While it’s getting harder to find quality web apps and software that works, development teams can build the best apps possible if they put the user front and center — this means considering usability testing as part of a software development lifecycle, looking into today’s modern technologies and frameworks, and finding new ways to give users the experiences they need so they always come back.

Usability testing
One of the ways to really hone in on the user’s wants and needs is to consider focused sessions as part of targeted user experience testing, according to engineering director at Sencha, Mark Brocato. This can cut down on development time since issues and potential problems are highlighted before the web application reaches its launch date.

Usability testing is an easy way to see how something is used, from real users, he added. Typically these users are asked to perform certain tasks, and it gives teams the ability to see where users may stumble and it helps the development team see if users are tripping up in any areas that they shouldn’t be, said Brocato.

Brocato said that his team has learned much about their own users at Sencha from conducting usability tests, and he said it’s better than trying to guess in your head what people are going to do (or not going to do) within a web application.

There are a few added benefits to usability testing. For instance, it gives teams direct feedback from the target audience to the project team, any internal debates can be resolved by testing issues with real users, and it minimises the risk of the web application failing when it goes into production.

Of course, there are a few disadvantages to usability testing, according to an ExperienceUX report. Usability testing is not always representative of the real life web app scenario, and it is qualitative, so it doesn’t provide large samples of feedback that an online questionnaire might, according to the report.

But, usability testing can help development teams gather information about the user’s needs when it comes to design, like the functionality and features of the web application. It won’t necessarily give teams an understanding of the needs that goes into the delivery of the application.

According to head of products at NGINX, Owen Garrett, the way to figure out those needs is to ask questions like, where is my user located? What is the standard of performance they expect? What devices are they using? How is the web application going to be deployed? Will the application need protection from spikes of traffic? These are the important questions to ask if you want the answers that directly relate to the user’s use of a web application, he added.

Considering developing a web app?
Even after a development team thinks about what they are going to build, and after they get that feedback from potential users, they still need to put the user experience front and center.
Users have so many choices right now, and if they are unhappy in the slightest bit, they know that they can go somewhere else because they’re not locked into one application anymore, said Rod Cope, CTO at Rogue Wave.

Performance continues to be a challenge for organizations, because like Cope mentioned, users want to stay in their flow and experience no delay. According to Rogue Wave’s research, they’ve seen that a one second delay in page load time leads to a 7% decrease in purchase conversion. That’s significant, said Cope.

Consider an ecommerce site that gets 100,000 business transactions per day, said Cope. With a one second page delay, it could cost the business $2 million a year just from a one second page load time.

“[We’re at] the point where you click something and you don’t want to notice that there is a delay, and if there is, you are already frustrated,” said Cope. “We are getting more and more used to having everything instantaneously.”

When it comes time to actually develop a web application, development teams need to think about more than just performance. They need to take a different approach than they would with developing a mobile application, too. For a long time, according to vice president and principal analyst at Forrester, Michael Facemire, businesses would take their website and jam it into mobile application. Now, businesses are looking at their mobile apps and considering how they can replicate that design and user experience as a web application, according to Facemire.

Instead of taking a mobile application and trying to recreate that same experience in a web application form, it makes more sense to consider users’ channels. For instance, if they are on a desktop, they are probably okay with a longer session with more in-depth experiences, whereas on a mobile device, users often want quick sessions, said Facemire. He added that the average session on a mobile device floats around a minute or minute and a half, and on a desktop, it’s longer than that, so a development team needs to deliver a much more detailed experience on the web, he said.

Screen real estate plays a role in web application development as well. Web application development requires different viewport sizes, the resolution, and web layouts. On a smaller device, users interact with their finger, swiping, tapping, and holding their finger down to complete a given task. On a larger device like a desktop, users lose that ability to tap and swipe.

According to Brocato, it’s the little things that can sway a user from using one application to its competitors. User’s tolerance for any experience, especially in the consumer setting, is very low, he said.

One solution to this development challenge is to simply build smaller releases, said Facemire. Software is shipped often and the releases are getting smaller and smaller, yet they still include something valuable to the customer. Shipping small allows development teams to gather feedback, conduct an analysis, and determine if the release was successful or not. And if it’s not, it shouldn’t cost a team 16 months in turnaround time, said Facemire. Teams need to fail fast and understand why their customers were unsatisfied.

“The concept of failing fast is important here,” said Facemire. “Let’s fail quickly, and then learn from that — you don’t have to get it right the first time, but if you don’t have it right, let’s understand why and let’s not make the same mistake again.”

Web application technologies
Another challenge for web application developers today is the “never-ending war of the frameworks,” as Brocato puts it.

“It’s like Game of Thrones, web style,” he said. “A year ago, when I went to my local Java meetup, the talk was all about React, now it’s shifting a bit.” He said that now, Angular is still fairly popular, but there are things like web components and additional frameworks that keep evolving, and fast.

Chances are, the framework you pick today is going to be close to outdated by the time you “finish” your web app. And if it’s not the framework, Brocato said it’s the language. Web application developers need to come to terms with this, they need to figure out a strategy for development and how to update and manage the apps so their app doesn’t look antiquated, said Brocato.

However, when it comes to languages, JavaScript still remains king of the castle. There are new flavors of the language for web development, with TypeScript and Flowscript getting some attention, according to Cope. They are compatible with JavaScript so developers can write in those languages and write code that runs in all browsers and devices.

Of course, added Cope, PHP is still popular, Java and Python continue to make moves in artificial intelligence, too. Other software and coding sites highlighted technology like AngularJS, React, Node.js, Ruby on Rails, ASP.NET, and Vue.js provide additional functionalities that can be utilized within your own web application development project.

When it comes time to actually develop a web application, Cope said that he thinks about it in two separate “camps” of development. Some teams think web applications need to be a separate mobile application written from the ground up, and those need to be native because you want maximum performance and the best user experience, he said.

Then there’s another camp: “Instead of doing all this extra effort to write these native apps in separate languages, let’s just use standard web technology and basically write a web application that runs on mobile devices, looks good and performs well,” said Cope.

He added, “I think you’ll see different companies going different directions, depending on what they are comfortable with.”

Development teams should also consider the microservice approach for the server side of the application, which allows you to build applications in a cloud native fashion so they are broken down into independent components which will scale and update individually. NGINX’s Garrett said that this gives teams flexibility and security as compared to monolithic application.

The convergence of mobile and web
While users are still mobile-first, and there are specific technologies that are better suited for mobile development, leaders in the development space are starting to see the technology that separates mobile applications and web applications is now starting to converge, according to Garrett.

For example, desktop web applications are operating at a mobile style, mobile apps rely on web page technologies and HTML renders custom code, he added.

But in terms of practical differences, Garrett said that mobile applications tend to use API requests much more than web apps. Web applications do traditional HTTP requests and mobile uses standardized APIs. Mobile apps go to great pains to batch up API requests so they can make as ingle large network request rather than multiple small ones, he said, however, one technology that is unifying both web and mobile is HTTP/2, which is a major revision of the HTTP network protocol used by the World Wide Web, and it is derived from the earlier experimental SPDY protocol.

“It’s a new way of delivering web content; it has security built in and performance optimization built in, and it allows mobile and web apps to get a great level of performance even if the underlying network is high latency,” said Garrett.

Also, what started as responsive design in the mobile application space is now becoming standard for web applications. HTML, web rendering technologies on the desktop — it’s all becoming the de facto standard for a great many web applications, said Garrett.