15 Jul 2016

Why RealEyes Switched to TypeScript.

Within the past few months RealEyes has switched from using JavaScript as its main development language to TypeScript. We have successfully launched a large production application developed entirely using TypeScript and have found the change to be helpful and has increased productivity.

Why TypeScript?

Readability

The most attractive benefit to using TypeScript in my opinions is readability. The ability to create a more readable code base that explicitly states class declarations, and property types is something that was missing from JavaScript.

Take a simple namespace with a class definition developed in both JavaScript and TypeScript:

Screen Shot 2016-06-27 at 12.10.33 PM

JavaScript namespace and class declaration.

Screen Shot 2016-06-27 at 12.11.01 PM

TypeScript namespace and class declaration.

Notice how with TypeScript we are able to explicitly state our namespace and class, unlike JavaScript where that is inferred and only a seasoned developer would understand what is actually occurring. With TypeScript we are also explicitly able to provide variable types and return types within the code without having to spend time creating additional documentation with tables to define everything for other developers to use.

Code Hinting

With TypeScript your IDE or Text Editor can be setup in such a way to allow for easy hinting to display property types, return types, and comments. This increases productivity so that a fellow developer doesn’t have to find the documentation for the library or class that they are using or have to look at any source code to determine what is required and what the expected output is. When working within teams where many developers are working on multiple services this ability to quickly show each other all the types is invaluable.

Take the following screenshots:

Screen Shot 2016-06-27 at 11.19.09 AM

TypeScript: available class found within ‘test’ module

Screen Shot 2016-06-27 at 11.17.45 AM

Class definition hint

Screen Shot 2016-06-27 at 11.21.04 AM

Class constructor properties hint

Screen Shot 2016-06-27 at 11.22.32 AM

Available properties and methods on SomeClass

With TypeScript and a plugin with your favorite IDE or Text Editor such as WebStorm, VSCode, Sublime Text, Atom, etc; we can show available class or properties found within an external module, view class constructor properties and return types, and view class properties and methods. You can also add any documentation about the properties or methods by adding simple comments within the module.

This ability to show module classes and class properties and methods also extends outside of your teams code base. Using a popular npm module Typings you can download definition files for your favorite libraries such as JQuery and then have access to that libraries type definitions.

Screen Shot 2016-06-27 at 11.48.47 AM

Sample of available properties and methods on JQuery library

Valid JavaScript is Valid TypeScript

Since TypeScript is an encapsulation of JavaScript (ES7, ES6, and ES5) not only do we get to use the new methods provided with ES6 and ES7, all valid JavaScript is valid TypeScript. This means that even though we enforced strict typing and class structure within our development environments through linters (tslint) and the tsconfig; sometimes when a developer who is still learning TypeScript needed to quickly lay down some comfortable JS logic to solve a problem. It was still able to transpile and work without them being blocked by a learning curve. This then allowed the team to learn the TypeScript way at a more leisurely pace instead of being thrown into the deep end without a life vest.

Popularity

TypeScript has quickly become a popular language within the web development industry. With Angular 2‘s adoption of the language, many other developers and companies are quickly moving to TypeScript. Meaning that this language will be receiving a lot of support within the community, and more developers will be learning and practicing this language. Additionally with the familiar layout of other object oriented languages such as Java, or C#, it may start attracting more developers who found JavaScript unattractive and confusing.

Share this
15 Jul 2016

Automated Functional Testing with Intern

What is automated testing?

Automated testing is a way for developers to test their code without having to manually go through and review everything they have built. It allows for warnings to be thrown when specific parts of the code are broken, this helps developers quickly narrow down what is defective. Efficient automated tests can save hours of debugging and QA time. There are two types of automated testing: Unit testing and Functional testing. Unit testing takes in inputs and checks that the functions being tested return the expected output. Functional testing tests the interactions a human would have with a program. In this Blog Post we will be focusing on writing functional tests with an automated testing framework called Intern.

Why use intern…

When picking a framework to use for your automated testing you have a few different choices. You need to consider what you need from the framework and what type of application you are testing.

leadfootLogo

We chose to use Intern as our testing framework because of its flexibility and compatibility with web applications written with JavaScript. Intern is able to assist in running both unit and functional tests. chaiJSLogoIntern uses a few different tools within the framework. Leadfoot API is included to give the developer a selection of methods that can be utilized in order to mimic user interactions with different UI elements. Intern can use Selenium in order to automate browsers that are being tested and can also be leveraged to use cloud-based testing tools such as BrowserStack. Intern also uses assertion libraries to run specific tests on targeted elements. It is compatible with any assertion library, we are choosing to use Chai.js in our example.

The following is a simple example of how to use Intern

The following is a basic functional test that we are using to load the Intern.io website and check that the title text says “Intern.”

define([
'intern!object',
'intern/chai!assert',
'require'
], function (registerSuite, assert, require, registry) {
registerSuite({
name: 'intern',
'00-page-load': function () {
.get(require.toUrl('https://theintern.github.io/'))
.sleep(8000)


return this.remote
.get(require.toUrl('https://theintern.github.io/'))
.sleep(8000)
.findByClassName('logo')
.getVisibleText()
.then(function (text) {
assert.strictEqual(text, 'Intern.', ' The visible page title should say “Intern.” ');
})
.end()
}
});
});

Lets break this down…

We are using define in order to load in the modules required to write our test with Intern then registering the suite.

define([
'intern!object',
'intern/chai!assert',
'require'
], function (registerSuite, assert, require, registry) {
registerSuite({

Name of our test suite, multiple tests can share this name
name: 'intern',

Our first test name, this needs to be unique
'00-page-load': function () {

This loads the page we will be testing (Intern’s homepage) then gives it 8 seconds to load before running the next method.
return this.remote
.get(require.toUrl('https://theintern.github.io/'))
.sleep(8000)

This loads the page we will be testing (Intern’s homepage) then gives it 8 seconds to load before running the next method.
return this.remote
.get(require.toUrl('https://theintern.github.io/'))
.sleep(8000)

The title of the Intern.io page is the text in the logo. We are looking for the logo class and checking to make sure this class is visible and displaying the correct text.

.findByClassName('logo')
.getVisibleText()
.then(function (text) {


Uses the Chai Assertion to make sure the visible page title says Intern.

assert.strictEqual(text, 'Intern.', ' The visible page title should say “Intern.” ');
})

Ends the most recent filtering operation. In this case it is .findByClassName(). If you do not include the end method your next filtering operation will fail.
.end()
}
});
});

Chrome Plugin

Intern has created a Chrome plugin to make testing even easier. The Intern Recorder plugin helps track user interactions in your browser and translates them to code in the Chrome console under a tab labeled ‘Intern’. The Intern recorder is useful for targeting UI elements and tracking user processes . One of the biggest issues we found in depending on the Intern Recorder is that it relies on Xpath methods from Leadfoot that are not currently supported by IE.

In conclusion

Automated functional testing is a great way to cut down on QA and debugging time. Find the framework that is the most compatible with the code you are writing. If you are working with web applications we suggest Intern. If you need more help setting up your first test here is a link to Intern’s getting started documentation .

Now have fun writing functional tests!

Links

Share this
15 Jul 2016

Angular CLI Preview

The Angular team has announced that Angular2 is in Release Candidate status, so it’s time to get started on learning the new framework and its structure. Angular2 is quite different from Angular1.x, and the familiar JavaScript has been replaced with the newer TypeScript. Transitioning from framework to framework can be difficult enough, but when you throw in a new language, growing pains are sure to set in. However, the good news is that the Angular team has a tool to help you skip some of those growing pains and speed up development for those already in the TypeScript camp. Give a hearty welcome to the Angular CLI!

The Angular CLI is a command line tool that is built not only to help you bootstrap your project, but also to handle the build files, linting configuration, testing setup, and other boilerplate that can consume your precious development time. The CLI can help you with the following tasks:

  • Generation of a base project
  • Generation of components, services, directives and more
  • Generation of unit testing and e2e testing stub files
  • Creation of a build script
  • Serving your project with live reloading of changes
  • Linting
  • Compilation of Less, Sass, Compass and Stylus files
  • Generation of routes using lazy loading
  • Creation of production builds
  • Getting your project on GitHub
  • Plenty more. See the details on the CLI’s GitHub page.

Currently the CLI is in beta, but it is certainly ready for use and pretty well documented. The installation is simple with npm:

npm install -g angular-cli

If you are on Windows, you will likely need to run your command line as Administrator for this to succeed. You may also need to run a separate global install of the typings npm package.

Once you have installed the CLI, all you have to do to generate a project is navigate to the directory you want to create your project in via the command line and enter:

ng new PROJECT_NAME

Then change into the directory the CLI just created and serve the project

cd PROJECT_NAME
ng serve

Angular CLI will compile your TypeScript, start up a web server, and possibly even open a browser tab to show your application. (Otherwise it will tell you the URL to launch) Super easy!

This generates a whole host of files for you, including the .ts file for your component, the HTML for the page and the components templates, and the CSS files for those as well. On top of everything needed to actually compile and run your project, it also has created the hooks for you to start creating tests for your application using Karma or Protractor.

If you want to use Less or Sass rather than straight up CSS, all you have to do is change the file extension of the CSS files the CLI generates for you to be .less or .sass and the ng serve command will cause those to be compiled into CSS.

The next step is to start creating some components to go in your application. Of course Angular CLI has you covered there too. Instead of having to spend time memorizing the format for a component file and debugging your typos, you can just use the CLI:

ng g component new-cmp

Or, this, if you’re not into that whole brevity thing:

ng generate component new-cmp

That again will generate all the boilerplate TypeScript, HTML, and CSS necessary to get your Angular2 component bootstrapped. It is up to you, however, to import your component in the right places where it will be used. The CLI isn’t that magic yet.

The CLI also can help you take advantage of the lazy loading by routes in Angular2. By default, when you generate a route in the CLI, it creates a route that will only load its required components when that route is activated. This saves you the upfront cost of loading components up front that a user may never visit. Of course, you may also want to load everything up front so route changes are quicker. You can of course toggle the default lazy loading off:

ng generate route my-route --lazy false

When you’re done with your coding and it’s time to build, not only can the Angular CLI handle your build process, but can even do some deploying. ng build will compile everything and move it into a dist directory. ng github-pages:deploy will create a repo for your project on GitHub and then deploy the build using GitHub pages. Granted you will have to make sure you have the tokens and ssh credentials set up for such a deployment, but the fact that Angular CLI can do all this out of the box is pretty amazing.

If you’re looking at Angular2 and wondering whether to put the effort into switching to the new framework, the Angular CLI will hopefully help you make up your mind by saving effort and keeping you from getting tripped up on typos or stuck scripting methods to serve up and compile your code. The Angular CLI is a powerful tool to help you get up and running on your way to Angular2.

Share this
16 Dec 2015

A First Look at Project Comet

2016 is just around the corner so we decided to do a bit of research to see what kind of exciting new changes in the world of UI/UX we had to look forward to in the new year. We found a lot of the usual New Years talk about upcoming design trends and predictions, but one thing in 2016 stood out from from the rest: Project Comet

read more
Share this
02 Oct 2015

Material with LESS

In this post we are going to create a dynamic style-sheet that can be altered to fit any web application project while keeping inline with Material standards. This project is a great way to familiarize yourself with Material design while creating a style-sheet that can be recycled over and over again to create unique looking designs by just changing a few lines of code.

read more
Share this
24 Sep 2015
16 Sep 2015
10 Sep 2015

Getting Your Feet Wet with Angular Animations

Imagine you get into a car start the engine, touch the acceleration and go from 0 to 60 in the blink of an eye. You then take the wheel to turn right and instead of a smooth turn the car takes an immediate 90 degree turn.

This is how interface design feels without smooth transitions. It works, but it does not feel natural to the user. Animations can give your design the illusion of depth and lifelike motion, creating a more 3D space and giving the user the feeling of being inside the design.

read more
Share this
19 Aug 2015

Different uses for the HTML5 Canvas tool

One of my co-workers suggested I look into the HTML5 Canvas as a possible solution. After looking into the canvas element I realized it was not only the perfect solution to my current problem, but it could also be a very useful tool for future projects involving graphical elements that need to changed based on user interaction.

read more
Share this
09 Jul 2015

© 2017 RealEyes Media, LLC. All rights reserved.