${post.fImageName}

Building a Progressive Web App - part 2: RESTless search for a front-end framework

Missed the first post? Building a Progressive Web App - Part 1: Background and Back-end

The Office League

Time was ripe for a better name for our project than "the foosball app". With big dreams of building an online community of Foosballers, we went megalomaniac as we realized the concept could be applied to just about any "office sport". By launching the app as a service, we can enable players across "sports", companies and nations to enjoy friendly office battles!

One thing leads to another, next a concept of leagues falls into place. Anyone should be able to sign in and create a league of their own. A league should be associated with a sport, such as foosball, ping-pong, dart and who-knows-what. And so begins the history of  "The Office League" !

The fabulous world of front-end frameworks

Developers love to cut code, but history has told us this it is not always the fastest way to results. Thus, we decided to identify the frameworks out there that would fit our modern web-application requirements:

  • Routing (sending you to the right view based on url)
  • Client side rendering of pages and components
  • PWA capabilities (caching, push etc etc)
  • Testability (making it more agile and robust)
  • Performance and more..

In short, we're looking for a modern Model-View-Controller (MVC) framework running in the browser.

The developers were split into three teams, independently given the job to identify potential candidates for the job. Next, they would present their findings and declare their favorite! The following day, they would use the selected framework to implement an "Office League" prototype.

Meanwhile - in the back-end

Two developers were isolated from the rest, and given the daunting task of composing a back-end prototype for the Office League. We had been peeking at an exciting piece of technology called GraphQL, and wanted to give it a go. Maybe this could be a better solution than the traditional RESTful approach?

In short, GraphQL is a new and effective way of building http API's. It origins from Facebook and has grown very popular in little time. This is not surprising when looking at the benefits GraphQL brings to the table:

  • Fast - get exactly the data you need in a single request
  • Strongly Typed and self documenting - quickly understand the API you are using
  • Supports both read and write, a.k.a. queries and mutations
  • Language neutral, as it is based on JSON
  • Early solution for server-events a.k.a. subscriptions

Surprisingly many tools are already available, like the API browser GraphiQL and the various tools form Apollo including production grade javascript clients.

GraphiQL interface shoing query, result and documentation panels
Screenshot of GraphiQL querying "players" in the prototype API

If you are more curious about GraphQL, check out Awesome GraphQL for an extensive list of resources.

As we just had one day to create a live back-end prototype, with testing data, and had little experience with graphQL before in combination with Enonic XP, we went with the graphql-express API on Node.js and booted a server on Heroku.

Test data was retrived from the spare-time-project Foos app and placed in simple JSON files on disk. Finally all the hard work put into "collecting data" a.k.a. "playing foosball" would come in handy!

At the end of the day we had a fully functional graphQL API running, ready for the teams to use with their favorite frameworks. We already concluded that GraphQL looks like a REST-killer and will share more details on this in our upcoming posts.

Framework research

Showing logos of popular front-end frameworks
Polymer vs Angular vs Ionic vs React

In total, our three developer-teams had quickly researched four frameworks. Here is how they ranked them and why:

#1 Polymer - by Google

All three teams actually ranked Polymer as their favorite, with the following comments:

  • Installs quickly
  • Huge set of components
  • Lightweight
  • Based on Web Components
  • CSS encapsulation
  • Lots of documentation
  • PWA supporting tools

Apparently, the only downside was Polymer being less popular than Angular.


#2 Angular 2 - by Google

Ranked second amongst two teams that investigated it with the following comments:

Pros:

  • Big community
  • Uses Web Components extensively
  • Material library
  • Plus for using Typescript (as we have been using typescript for years already)
  • Fast - when loaded
  • Mobile toolkit in progress (for PWA support)

Cons:

  • Appears to be high initial loading time
  • PWA tooling is not finished yet
  • Not suited for server-side rendering


#3 Ionic Framework - by Ionic

One team looked ad Ionic and gave the following comments:

Pros:

  • Large component set and feature rich
  • Appears to be mature
  • Based on Angular and supports Web Components
  • Good community and traction

Cons:

  • Built for "hybrid" apps and using native bindings (not what we are looking for)
  • PWA support is still emerging, but Ionic could become really interesting in future versions based on their statements regarding PWA

#4 React - by Facebook

All teams looked at React, and ranked it last - or as one team put it, number 10 out of 3.

React is hugely popular these days, so one might wonder - why all these negative vibes then?:

Pros:

  • Very popular
  • Lightweight
  • Performant
  • Supports server-side rendering (isomorphic style)
  • JSX

Cons:

  • Not a framework by itself - just a piece of what you need
  • Steep learning curve
  • No component system or encapsulation
  • Requires writing CSS in Javascript
  • No PWA support
  • Licensing issues (already popular forks out there)

In short the developers argue using React will be a longer and more complex approach over the more integrated frameworks from Google. Also, the license put us off.

Frameworks in action

Three teams of developers cannot be wrong, right? Polymer was dominating in the first round. Now the gloves come off as each team gets a full day to build a prototype using their favorite framework. Only problem is, just one team will use Polymer as we need to see how the other frameworks play out as well.

As no-one wanted to use React, and Ionic was pretty much ruled out for the moment - the remaining teams set out using Angular 2 and Aurelia?!. Aurelia was suggested as interesting alternative to the other frameworks, so why not throw in a wildcard in the game?

Team Polymer

The polymer team managed to deliver a fully functional and good-looking prototype, extensively using the GraphQL api provided. The prototype provided a nice user experience handling responsive design, navigation and routing with nice url's and re-use of components across pages. Additionally the team managed to make large parts of the app support "offline" mode thanks to the PWA toolkit provided by Polymer. It should also be noted that one of the developers had some previous experience with Polymer, and also got the opportunity to put in an extra day of work.

Mobile screenshots showing listing of games and top ranking players
Screenshots from the Polymer prototype

The team points to the following benefits of Polymer:

  • Get started fast
  • Easy to learn and understand
  • Built-in web server and package builder
  • Web Components with isolation of HTML, CSS and Javascript inside the Shadow DOM
  • Big library of UI and helper components which solves complex issues such as google api components  (analytics, maps, youtube), infinite scrolling, ajax requests, offline storage, modal dialogs etc.
  • Lots of custom components made by community members
  • Common/shared CSS styles can be easily imported inside a component via style modules
  • PWA support through toolbox
  • Localization support
  • Two-way data binding
  • Support for gesture events (down, up, tap, track)
  • Super-simple event handling: specify event listeners via element attributes
  • Auto-generated documentation
  • Easy to test (tests are shipped with components)

The following was identified as negative:

  • Event communication between components might not be straightforward
  • Have to include entire WebComponents library and Polyfills
  • Examples in the official docs are not diverse enough
  • Limiated community, so there is not so much help on Stack Overflow etc.

Team Angular 2

The Angular team only consisting of two people produced a fully responsive prototype with navigation, routing, nice URLs and component re-use. Even if it required more effort than for the Polymer team, they also managed to add offline support for the Prototype. One of the developers had been experimenting with Angular for a few hours on his spare time, so that gave them a quick start.

Mobile screenshots showing lists of games and teams
Screenshot from the Angular prototype

The Angular team were impressed with the framework and how cleanly it was built. Also, the application seems performant and easily maintainable.

The team highlights the following benefits of Angular 2:

  • ES5, ES2106 compatible
  • Written in Typescript
  • Extensive use of Web Components
  • URL routing
  • Readable code
  • Data binding
  • Uses annotations
  • Easy to learn (natural and logical)
  • Dependency injection
  • Loose coupling - good for testing (toolbox generates test-skeletons)
  • Huge community
  • Toolbox - ngserve

The negative side of things are said to be:

  • A lot of files
  • Big footprint
  • Toolbox is under development

Team Aurelia

So, how did the "wildcard" team do? Unfortunately the result suffered from many smaller issues not directly related to the framework. Nasty url's (which could easily be fixed they assured),  and poorly working responsiveness was obvious. Routing appeared to be working fine. All-in-all the team only managed to produce parts of what the other teams made - in the end the most exiting part of the prototype was the name: "Foosbook" :-).

The team pointed out that Aurelia was entirely new to them, and that they lost some time initially getting installed and figuring out use of things like the http-req library.

Screenshot listing games
Screenshot from Aurelia prototype

Summarized the team highlights the following benefits of Aurelia:

  • ES5, ES2106 and typescript compatible
  • Uses Web Components
  • Full routing support
  • Easily readable code
  • MVVM approach
  • Configurable data-binding
  • Convention over configuration
  • Easy to learn
  • Testable with dependency injections

and also points out the following potential caveats:

  • Smaller eco-system compared to the alternatives
  • Commercial bindings (could also be a plus in some cases)
  • Hard to come across examples and documentation
  • No big success stories (so far)

Conclusion

The tems jointly consider Polymer as the best framework for a typical web-developer with Javascript background. Angular 2 appears to be better suited for developers coming from typed programming languages languages such as Java and C#.  This is in particular reflected by the fact that every Angular component has a Typescript class as its core, where Polymer uses an html-template definition.

The fact that Angular 2 is based on Typescript was also considered as a big plus for our team, given the fact that the Enonic XP UI has been built entirely using Typescript and we value the benefits this brings to more complex applications.

Aurelia was considered similar to Angular in many ways, but remained the outsider also after testing it.

In the end, there are striking similarities between all these frameworks when it comes to how they work and the features they provide - we believe all frameworks are of high quality and recommend you to evaluate what fits best for your project and team.

When forced to choose a framework the developers were now split right down the middle. Given the equilibrium our CTO (yours humbly) tipped the weight in favour of Angular 2 for three reasons:

* Angular is very popular so our project might be relevant to more people
* We want to learn more about Angular 2, as we are considering using it for future development of the Enonic XP UI
* The MEAN stack (A for Angular) is an alternative to Enonic XP in certain projects. Thus, adding Angular starter kits and examples to XP makes perfect sense.

We now embark on the real tasks of creating the Office League, using Angular, GraphQL and Enonic XP - or the AGE stack if you like :-).

Look forward to our next post in the series - where the data-model is established and the application interface starts to take shape.

What happens when our developers are challenged to choose a front-end framework suitable for our Progressive Web App, and at the same time to drop the RESTful approach for the new-kid-on-the-block: GraphQL? This is the second post where we share insight from our development team when building a PWA from scratch.

Continue reading »

${post.fImageName}

5 alternatives to NodeJS for Java

Having developed software for more than 3 decades, I have used most of the popular languages out there. I was forced into coding Javascript since it's running on virtually all browsers out there. It's a very popular language nowadays and ranks pretty high on the TIOBE popularity index.

Executing JavaScript on the server is a natural thing to do, because you can then concentrate on learning one language. You can even refactor out common code that will execute both on the client and the server - this is called isomorphic code.

NodeJS is the best known and most popular engine for executing JavaScript on the server, but there are actually many ways to do this. Here are some projects worth checking out.

DIY

Lets start off hardcore, with the "Do It Yourself" approach. Developers love to create frameworks, so why should this be different? To create an alternative to NodeJS on the JVM, first you need a Javascript runtime. You definetly do not want to build the Javascript runtime from scratch. There are many Javascript-runtimes available for the JVM. The main ones are Rhino and Nashorn - both big and reasonable fast animals. Rhino is bundled with Java 7 and earlier, while Nashorn is bundled with Java 8 and later. Nashorn is the successor of Rhino and is much faster since it's using a lot of new optimization techniques.

The next thing you will need, is some sort of module system. CommonJS defines a module system, which is what NodeJS uses. It's wise to focus on that since it's basically the standard. There are several CommonJS implementations for Rhino that works pretty well. If you are using Nashorn, you will need to build this yourself since all the other implementations out there are either faulty or  simply too slow.

Next, you will probably need an http-bridge and some sort of pluggability. Then, unless you are fully NodeJS compliant, you will have to add reusable modules to make it work for your own and other's projects.

Trust me when I say, a DIY solution is a lot of work if you need something more than just running plain Javascript on the server. I have first hand experience building a NodeJS alternative in Java which you can read about later in this article. You might be better off choosing one of the existing ones below.

Vert.x

Eclipse Vert.x is a toolkit for building reactive web applications on the Java platform. It's very pluggable and speaks multiple languages - aka polyglot. That means you may freely choose your language, and JavaScript might be one of your choices. In Vert.x you have full control over the server runtime. If you are developing a web application, you actually need to create the http server in your code. 

Everything in Vert.x is reactive. That means it is non-blocking by nature, like NodeJS. This programming technique can be difficult for Java programmers, at least to switch to thinking in a reactive way. Some features are not implemented in a straight forward way in the code, so the code tends to be hard to read unless you are not used to it.

The main purpose of being reactive and non-blocking is speed. Vert.x is fast, but the speed varies between programming languages. Vert.x uses the new Nashorn for its JavaScript engine.

Vert.x is very pluggable and has a lot of existing modules. It's nicely separated into a core, language extensions and other extensions. This means that even the language support is pluggable, which is very cool indeed. 

One of the problems with Vert.x, as I see it, is that you pretty much need to implement your entire application on it. I know you can mix and match, but I found it hard to make it play nicely with my existing application. For a micro-service architecture it probably does not matter since your "glue" is the network.

RingoJS

RingoJS has been out for a while. It was one of the first JavaScript alternatives to NodeJS I looked at. I was really inspired by this project as it has a lot of NodeJS functionality out of the box. RingoJS is multi-threaded and not reactive. It's built upon the old Rhino JavaScript engine and sadly not the newer Nashorn.

Since everything in RingoJS is multi-threaded it's much easier (in my opinion) to read the examples and start programming the way you are used to. It comes at a cost, but for low to medium scale web applications it should be just fine. Web services are implemented using JSGI (JavaScript Gateway Interface) which is a standard from the CommonJS people.  Implementing web services in RingoJS is pretty simple and straight forward, very much like what Express does in NodeJS. 

There are many out of the box libraries, and there is even a package manager for downloading and managing external packages. This package manager communicates with the package portal available on packages.ringojs.org. Since Ringo supports CommonJS modules (aka require), you can probably use several existing NodeJS modules as well, but I have not tried that. Integrating with existing Java libraries is also a breeze since it's built on Rhino. Rhino has extensible support for bridging Java and JavaScript and the other way around.

If you want to use RingoJS on your own server, they provide a servlet for doing that. This means that you can dispatch requests from your existing spring application or J2EE application to some JavaScript that handles the request. 

I would really like to see it using Nashorn instead of the old Rhino. Also it seems a bit foreign for us Java developers. It feels like investing in a NodeJS replacement, instead of just an alternative.

Nodyn

Nodyn is a little different from the rest. It tries hard to implement full NodeJS compatibility - so it's actually a total replacement, not just an alternative approach. The JavaScript engine used is DynJS, which is much more performant than Rhino. Not sure how it stacks up with Nashorn since I have not seen any benchmarks on that. 

You can use Nodyn in two ways, either as a NodeJS replacement writing everything in JavaScript or embedded into your own system. Both ways of doing it, gives you excellent support for your existing Java investments. If you are using it as a NodeJS replacement, then you will load your existing Java libraries using some of the Nodyn's API's. 

The only problem I see, is the lack of servlet support. If you want to write your http web service logic in JavaScript while still working with J2EE servlets, then you are out of luck or you will need to build this yourself. Also not sure if you will ever need to replace NodeJS since it will probably never be a full blown 100% replacement anyway.

PurpleJS

PurpleJS is another alternative for NodeJS running on Java. It's one of the projects I have been working on, so I will try to be very objective when writing about it. As stated earlier there are a lot of inner workings that you have never considered when trying to create such a project. Luckily for me I had hands on experience building another framework inside a well known Web Platform, so I took all the knowledge that I had from that project, put it into PurpleJS - and improved it for the better. 

PurpleJS uses Nashorn as the JavaScript engine. Since Nashorn does not implement CommonJS module support (aka require), PurpleJS implements that in it's own way. Instead of searching the file-path it searches inside JAR files - this is the default behaviour and can be overridden. 

Implementation of JavaScript http services is pretty easy and follows the same pattern as JSGI (JavaScript Gateway Interface), even if it's not directly compatible. It also implements an express like router for request routing.  It supports http websockets support out of the box, which makes it dead easy to use. Even if it's easy to create web applications with PurpleJS, it is not limited to that - command-line applications can also be implemented using the framework.

PurpleJS is designed for rapid application development, and one of the key features is that you seldom need to reload on changes. Code is instantly refreshed if the files are changed. Executing Java code inside your JavaScript is the same as for Nashorn, but the framework hides this by providing reusable modules via it's plugin framework. Embedding PurpleJS is also very easy to do, as it provides an integration API to build integrations on. Spring and J2EE support are not there yet, but will be in the future. The default approach to PurpleJS also uses plain Maven-style modules and Gradle for building.

For now, PurpleJS uses a multi-threaded model and the http-layer is not async or reactive in itself. This can be a limitation for some, but I find it easier to build and debug applications using a more straight-forward model.

What's Next?

Now you know some alternative approaches to NodeJS. There are more, but I did not have the time to review all of them. If you want to explore the possibility to use JavaScript on the server, there are at least 4 excellent alternatives described above. I trust you to wait with developing your DIY solution until absolutely needed - and I actually bet you won't need it - ever!

NodeJS is the best known and most popular way of executing JavaScript on the server. If you have existing investments in Java and see the benefits of using the Java VM, then NodeJS might not be an ideal approach. Luckily, the JVM provides Javascript support and with it many alternatives to NodeJS.

Continue reading »

${post.fImageName}

PurpleJS - the alternative to Node.js for Java projects

Okey, so let's say that it's not really necessary to have an alternative to Node.js, but we all do like to have alternatives right? Many many many years ago, when I was only 2^5+8. I was thinking that it would be nice to combine the power of Java and my existing investments with the simplicity of JavaScript. JavaScript makes it easy to share code between client and server so it's only natural to run JavaScript on the server too. But I wanted at the same time the power of Java and what the JVM can provide. 

With Enonic XP, the combination of Java and JavaScript is used to  speed up the development process and allow frontend developers to implement backend services. I saw that this was a very popular approach to develop software more effectively, and wanted everyone to be able to use the technology for free and in existing investments. PurpleJS was born.

What is PurpleJS?

PurpleJS is an alternative to Node.js for Java projects. PurpleJS makes it easy to build performant and lightweight Javascript server applications without the complexity of Node.js asynchronous programming model.

PurpleJS gives Javascript developers access to the vast Java community and the robustness and performance of the JVM. Java developers benefit from the simplicity and flexibility of Javascript in their projects.

Use PurpleJS when you want to:

  • code Javascript, but your application needs to run on the JVM
  • build fast and lightweight multithreaded applications with Javascript
  • create server applications with Javascript but access and use Java libraries
  • deliver isomorphic applications - running the same code on both client (i.e. browser) and server
  • build Javascript server applications that run on any infrastructure
  • code fast, no need to compile or re-deploy - especially useful for front-end projects
  • extend existing Java applications with Javascript
  • participate in the Javascript movement while leveraging your existing projects in Java

PurpleJS is a simple and capable framework for creating performant web applications without leaving Javascript. It is created in Java to give the flexibility and performance Java provides.

Getting started

I'll show you how to get started building your first web-application in PurpleJS.

You need to install two things: Java SDK and Gradle.  

Java is needed since PurpleJS is built on Java - that does not mean that you will ever need to program in Java, it's only the runtime. Gradle is a build system that is used for building applications in PurpleJS.

There are multiple ways to create a PurpleJS application, but the fastest is to use PurpleJS Boot. This is a ready-to-go server that's running Jetty and you do not need to worry about anything except your own application logic.

Setting up the project

To set up the project create a directory to hold the project files - like myapp. Go into the directory and create a file called build.gradle. This file should contain the following:

https://gist.github.com/srs/83f96a5f43ecddc4fe045d225e767a77

To test if this works, start the server by issuing the following command:

https://gist.github.com/srs/f46323314bac41cc2004632a892d0fb7

If everything works, you will see something like this:

https://gist.github.com/srs/b24435ae745d02dda1d36066020414ea

Congratulations, the project is now set up and we can start coding our application. Let's leave the application running. The system will pick up any changes so we do not need to restart the server while coding.

Main application file

If we open our browser and go to http://localhost:8080 we will see an error saying that /app/main.js is not found. This is our main entry-point for the application and it is required.

So, let's create the file src/main/resources/app/main.js and add the following:

https://gist.github.com/srs/f661826d56aa76aa2de93ceef0d05f3f

When we now refresh our browser again (http://localhost:8080), then a Hello World message appears. Simple, but this illustrates how simple it is to create a controller. You export the HTTP method that should be handled and returns the response. This response has properties like body,  contentType,  headers and status. The status is default set to 200 (OK). If we want to return JSON instead, just set a JSON-array or JSON-object to the body property.

https://gist.github.com/srs/142379437558081ac3638dd4b38015d1

The above example will output { name: 'Bill', age: 60 } with status = 200 and contentType = 'application/json'.

Request parameters

Request can contain various information. If you need to see what’s inside the request, just return the entire object as JSON like this:

https://gist.github.com/srs/91a78ad4281ad0a632e1f3a35635fa78

Let's modify main.js to implement a random generator that returns a random number between 1 and max. The max parameter should be read from max request parameter. First, we define the random number function.

https://gist.github.com/srs/8d00d03b89cdb91fa687c0b27b6e1bbc

Then we modify our exports.get function to return the random number based on a request parameter.

https://gist.github.com/srs/fdca444f4f1df0712aab79a84ab3a6e4

If we now access http://localhost:8080 without any parameters, we will get a random number between 1 and 10. Requesting http://localhost:8080?max=100 will give a random number between 1 and 100.

Routing

Sooner or later you will find yourself in need of a router. A router can route requests to different controllers and you can split your logic up into multiple files. Let's change our main.js file to include a router.

https://gist.github.com/srs/5bb43c5239c8d3a15bed3f2f97c949ae

This router can be configured by adding one or more routes. Every route can match both HTTP method and path. Let's add a route to get a random number.

https://gist.github.com/srs/05d22636e57d5d75f14735046213986a

To make this work we will need to modify our exports.get method so it delegates to the router that we have just configured.

https://gist.github.com/srs/41b99ae1a21e3b20715496c36c8299ed

If we now request http://localhost:8080 we will get a 404 since we no longer have a route on /, but on /random. Accessing http://localhost:8080/random will now give us a random number between 1 and 10.

We can also use path parameters to configure a route. If we want to access a random number between 1 and 100 using the /random/100 we can add a route like this:

https://gist.github.com/srs/3d2b968f5352c28ba2cdc50a242f83b8

If you now access http://localhost:8080/random/100 it will give you a random number between 1 and 100.

What's next?

This post is just scratching the surface of what PurpleJS can do. Want to check out what more PurpleJS can do? Please checkout the following resources:

 

 

PurpleJS is a Javascript application framework running on the Java Virtual Machine. In this post I will tell you what PurpleJS is, why it was created and how to get started.

Continue reading »

${post.fImageName}

Beautify your Form with Material Design

“Once upon a time there was an Ugly Form. Every day it would look at beautiful forms residing peacefully on the endless pastures of the Internet and sigh with envy.

Don’t I deserve my share of HTML happiness?’ the Form thought.  ‘Why do users shriek in disgust every time they see me? Why do they look terrified (and sometimes cry) when filling out my fields? And why the hell do they wash their hands after clicking my flabby lifeless buttons?””

Every time I would tell this amazing fairytale to my kids before their bedtime, they’d ask me: “Daddy, but why can’t the Ugly Form be happy too? Sure, it looks like HTML got diarrhea and pooped out a pile of colorless Lego bricks, but maybe there’s a chance for it in our cruel world?

And one day I finally decided to play the Fairy Godmother to the Ugly Form and help it turn into the Kim Kardashian of forms overnight (with zero plastic surgery expenses, mind you). After some thorough research I picked Material Design Lite (MDL) as my magic wand and that’s the only thing you will need, too.

I'll get a bit ahead of myself and show you right away what will be the end result of what we're going to do in this article.  

end_result.png

Looks modern and professional, right? But it hasn't always looked like that. In fact, I wouldn't dare to show you how this form initially looked if it wasn't for the sake of this article.

Anyway, let's get to the process. To begin with, we need a web page with an ugly form. I assume you already have it, but if not - just create one and experiment with it. For this article I created a job application form for an imaginary company hiring IT specialists, see below:

https://gist.github.com/alansemenov/12e362706cc05185b9141696dea9b612

The page has some basic styling, mostly to add some padding to controls in the form, but nothing fancy. It’s totally fine if your page is already using some CSS classes. But be aware that they may cause conflicts with the MDL stylesheets, so you might want to tweak the code and remove the old classes (you can do that dynamically using the Javascript code below, too).

When you open that page in a browser, it should look something like this:

pasted-image-41.png
One Ugly Form

This form has some basic text input fields, a textarea, a table, several fieldsets with checkboxes, radio buttons and a list of bullet items. And the buttons, of course.

When I saw the ugly creature I just built with my own two hands I was like (in heavy Austrian accent): “YOU ARE ONE UGLY MOTHE**UCKER…”.

Without further ado, let’s rush to the uneasy task of turning this freak of HTML nature into something worth showing to your boss before asking for a pay raise.

First thing we need to do is add external references to the MDL’s js-library and CSS inside the <head> section of your webpage:

<!-- MDL references -->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href=“https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

<link rel="stylesheet" href=“https://rawgit.com/MEYVN-digital/mdl-selectfield/master/mdl-selectfield.min.css">

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

<script defer src="https://rawgit.com/MEYVN-digital/mdl-selectfield/master/mdl-selectfield.min.js"></script>

Alternatively, you can download the MDL package, host it on your own server and reference that instead.

Note name of the CSS file: material.indigo-pink.min.css. The “indigo-pink” part defines primary and accent colors your controls will be using. There are plenty of colors to chose from, but I picked “indigo” because it sounds mysterious and “pink” because everything beautiful is pink (for example, unicorns and €50 bills).

Now let’s create some magic. We need to write javascript code that will loop through controls on the page and apply MDL styles to them. Copy the piece of the code below and paste it inside the <head> of your page, right after the references section:

https://gist.github.com/alansemenov/6cc5fa3ff7f99c50a0a1e55073969a36

Look at the code above.

There’s a method called materializeControls which will be called in window’s onload event handler, when the DOM is in place. materializeControls calls another method called materializeTextInputs, which loops through all text inputs and textareas on the page and assigns required MDL CSS classes to them, their labels and their parent divs.

NB! In order for Material guidelines to be entirely fulfilled, each input control must be properly wrapped inside a parent div along with its label. The code will not fail if it’s not the case but "you may not be 100% satisfied with the result", as my hairdresser used to say before I had given up getting haircuts.

When you refresh the page after adding this piece of code, you will see some amazing transitions:

material_inputs-43.gif
Materialized text inputs

Note how the first three text inputs on the left and the textarea on the right are now rendered according to the Material guidelines with more air around them, labels inside placeholders and nice on-focus highlighting.

By now you are supposed to be completely hooked, like a housewife addicted to Candy Crush, and cry for more.

We will stick to the same algorithm for other controls as well.


Dropdowns

Add a new method called materializeSelects that will basically use the same formula as materializeTextInputs - going through select controls and applying MDL styles to them.

https://gist.github.com/alansemenov/bc9772e09e9d4ebc509d5552c83c65bc

The only manual thing we will have to do here is add class “mdl-selectfield—floating-label” to the wrapping div of the select element. This will make sure that a dropdown’s label is shown above the control once a value is selected.

<div class="mdl-selectfield--floating-label">

<label>Education:</label>

<select name="education">



</select>

</div>

Refresh the page to get another injection of pure magic:

material_select.gif
Materialized dropdown

Radio buttons

The code for radio buttons is a bit different because they are wrapped inside their labels (so that a mouse click on a label would select the button), but the principle is the same. Note how we apply “mdl-js-ripple-effect” class to radio buttons’ labels to achieve, well, ripple effect. You don’t have to do that but it adds an extra cool touch to user interaction with the elements.

https://gist.github.com/alansemenov/96f9ba838b18b3eab95f3bc430a81c77

material_radio.gif
Materialized radio buttons

Checkboxes

Exactly the same principle here as with radio buttons (yes, you can use the same method with arguments):

https://gist.github.com/alansemenov/d1ca576ba206757098633536668a24b4

material_check.gif
Materialized checkboxes

Tables

https://gist.github.com/alansemenov/bef8e20c305c04fcb94146ba10dac3e1

pasted-image-58.png
Materialized table

Lists

For lists (<ul> element) we will perform a little trick. To liven up the list of offices we will replace the bullet character with a “home” icon from the huge library of Material icons.

https://gist.github.com/alansemenov/1f0a8ed805b29219bb8a1b87ad89e3f8

Note how when browsing through <li> elements inside each <ul> we inject an icon before the list item’s text and then wrap both of them with a <span>:

liEl.innerHTML = "<span class='mdl-list__item-primary-content'>" +
                  "<i class='material-icons mdl-list__item-icon'>home</i>" +
                  liEl.innerText + "</span>";

In order to be able to use Material icons on your page, you need to include a reference to their font family from the Google site, but we have already done it: 

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

After that you can render any icon from the Material library like this (we used “home” as an icon Id):

<i class=“material-icons"><icon Id></i>

And that’s how our new list will look now:

pasted-image-55.png
Materialized list

Buttons

https://gist.github.com/alansemenov/25d9ee24c82eb4763fb363031a5c852d

There are many different styles and effects that can be applied to buttons; you can read about it on the MDL site. We used the same “mdl-js-ripple-effect” class to get the ripple effect whenever a button is clicked and “mdl-button—colored" class to have them colored in the primary color of our selected scheme (remember indigo?). If you replace the latter with “mdl-button—accent” the buttons will be in accent color (in our case - pink).

material_buttons-60.gif
Materialized buttons

Conclusion

Believe it or not, but we’re done. Using almost no CSS and only basic knowledge of Javascript, we turned our ugly duckling into a beautiful indigo-pink-ish swan. We could have refactored our Javascript code a little to have just one pass through all elements on the page and then dispatch processing to other methods based on element type, which would of course be much better performance-wise, but here I tried to visualize “converting” controls type by type.

And this is how our form looks after our changes:

Screen Shot 2016-06-23 at 00.26.18.png
Materialized form

For even better effect I will show you the same form “before” and “after”, side by side:

Screen Shot 2016-06-23 at 00.10.16.png
The Ugly Form before and after the changes

And here's the final source code of our now beautiful form:

https://gist.github.com/alansemenov/60927b506815ef6d129b8c59f41a7525

I hope that this article will help you to take your first steps into the beautiful land of Material Design. It’s not as scary or complicated as you may think and along the way you might even help a page or two become better versions of themselves without giving it too much effort. After all, each of us had our encounter with an ugly form even if we chose to keep it a secret.

Material Design is a hot topic nowadays. There are many who have heard of it but not so many used its guidelines in their work. It looks sexy and stuff but how do you inject all that beauty into your website? This article will explain how to apply Material Design look and feel to forms on your existing web pages using basic knowledge of JavaScript and a 3rd-party library called Material Design Lite.

Continue reading »

${post.fImageName}

4 ways to drive your math teacher insane - JavaScript trolls

You can use any web browser on any computer (and tablet or smartphone) to prove it (scroll to the bottom of the article to find out more).

Here's the first out of four examples. They are all explained briefly for those interested. The explanations are not going into depth, they're just intended to give you a little information about the what's and why's. Links to more thorough explanations are provided for your convenience.

0.1 plus 0.2 is not 0.3

Adding the values 0.1 and 0.2 to each other will not result in 0.3 in JavaScript. Yes, you read right, do not believe your math teacher!

This code is checking if adding 0.1 to 0.2 will result in 0.3. JavaScript will answer yes (true) or no (false) when testing this. And to our surprise it says "no".

> 0.1 + 0.2 == 0.3
= false

[gif src="2016-gif-trolling/addition_part1"]

Tweet this gif

That's odd isn't it? Why did that happen? Isn't 0.1 + 0.2 the same as 0.3? Counting my fingers (parts of them) ... well, yes it is. Let's see what JavaScript thinks the result is.

> 0.1 + 0.2
= 0.30000000000000004

[gif src="2016-gif-trolling/addition_part2"]

Tweet this gif

Well now you at least see the reason behind JavaScript saying that the result is not 0.3. But why is it not 0.3? Keep reading.

Why did this happen?

Because of how JavaScript handles the storage of decimal numbers, it will not be absolutely perfect, but close enough. Computers don't really understand numbers and values, so it stores it in a pretty special way, but it's the only way for them to handle these values. It stores these values as something called floating points, so the exact representation for any number is never exact, it is "floating" as close as possible. It's never 100%, but in a real world case this would not give you problems because you'd always round that value down to two decimals, at most. Read a longer explanation on Quora.

The number 9999999999999999 does not exist

It's impossible in JavaScript to store the exact value of sixteen 9s. When doing so, in return you'll get 17 numbers back! Use sixteen 9s and it will magically get the value one added to it (+1).

I write var x = in the start to store my value, my number. The keyword "var" is short for "variable", something we use in programming for storing values. It's almost like algebra, letters that have a value. I then use a simple printing function - console.log() - to write back to me what was actually stored in the memory of JavaScript.

> var x = 9999999999999999;
> console.log(x);
= 10000000000000000

[gif src="2016-gif-trolling/16nines"]

Tweet this gif

The what now? I wish money worked this way, automatically adding. Keep reading to see why.

Why did this happen?

JavaScript cannot really store a number that high, so it does some cool things in the back to get this to work. The side effect is that it can only store every other number, like xxx982, xxx984, xxx986 and so forth. This is why xxx999 cannot be stored and it gets bumped up with one. Read more about the technicalities behind this on 2ality.

2 plus 3 is not always 5

Addition is not simply addition. From the early start in school you will learn that 2 + 3 is 5. But how come in JavaScript "2" + "3" is "23"? That doesn't make sense, right? Let's try this!

Examples

> 2 + 3;
= 5

[gif src="2016-gif-trolling/2and3_part1"]

Tweet this gif

> 2 + "3";
= 23

[gif src="2016-gif-trolling/2and3_part2"]

Tweet this gif

> 2 + +"3";
= 5

[gif src="2016-gif-trolling/2and3_part3"]

 

Tweet this gif

Wow, so many weird things going on here. What happened? But as you might have figured out, the quotation marks are the secret to this behaviour.

Why did this happen?

It's because of how JavaScript separates text from numbers. As it also handles text, and gives you the ability to join words together to form sentences, it "mistakes" the"3" to be the written text 3 and not the number/value 3. Well, "mistakes" is wrong to say, as this is the intended behavior of JavaScript and most other programming languages. The number 3 without quotes is a number that can be used mathematically, and "3" (with quotes) is just like any text and will be used to form longer words/sentences if used with the plus sign (+).

"Not a number" is still a number

This example is more related to the field of programming than math, but it can still be fun to try.

When working with JavaScript, you might want to test some user input to find out if it is indeed a number or not, like when they type in their date of birth. If the value is numeric, (like "1995" or "84") JavaScript will say "number", but if letters are inserted it will no longer be a number. JavaScript then reports it as NaN - Not a Number. In JavaScript we have a function that helps us test these kinds of things. We can send any data into it and it will give back to us information of the type it is - typeof().

> typeof(NaN);
= "number"

[gif src="2016-gif-trolling/typeofnan"]

Tweet this gif

So Not a Number is a number? That's as much sense-making as a ball being a cube, right?

Why did this happen?

Running this on the NaN ("not a number") you would expect to get "NaN" in return. But here is where JavaScript tricks you and returns "Number"! But it doesn't really trick you as this is standard behavior for any programming language. "NaN" is actually a number and part of how this is set up and meant to work. If you can only store numbers, but really need to "flag" that something is not a number, then you must store this flag as a valid number. So the computer scientists invented "NaN" for these cases. So "NaN" is a number, even if the meaning is "Not a Number". Makes sense now, right? Read more about it on Wikipedia.

Try the code yourself

You can - but don't have to - try all these examples yourself without any programming knowledge, and without any additional program. In the browser you are viewing this article, open what is called the developer tools (these might not be available on mobile).

In Chrome you can open this by right-clicking anywhere on a website and select "Inspect". This opens up a handy developer tool. In the top of that tool there are many tabs. Click the one labeled "Console". Here, at the bottom, you can type any code.

In Firefox you do the same; right click anywhere, select "Inspect", and then switch to the "Console" tab. The same goes for Opera, but there it's labeled "Inspect Element" when you right click.

If you are using Safari or Internet Explorer (or Edge) you'll have to find these tools yourself. But it's pretty much the same way, though some extra digging may be required, especially in Safari.

After typing any of the following code snippets in the console, just hit the enter key to run the code. So scroll back up and try some of them!

Closing words

There are a lot more fun and odd things going on with JavaScript than these few examples. Actually I'll do a follow-up post soon about this - quirks and fun facts about JavaScript.

If you'd like to know more about the language of JavaScript and how it came to be, check out this wiki about the JavaScript history.

All animated gifs in this article was recorded with LICEcap, and edited with the online tool EZgif.

* Make note that, per sé, your math teacher is not really wrong, it's just how JavaScript is built to handle some edge cases. Nonetheless, these are interesting and fun quirks!

The language of JavaScript has been around for a long time on the web. It does all sorts of different things, like calculations and animations. But did you know that it can also be used to make your math teachers pull their hair out? Here are four examples where JavaScript will "prove" your math teacher wrong!

Continue reading »

${post.fImageName}

The basics of Regex explained

Learning Regex

On this years JavaZone I attended a talk by Rustam Mehmandarov about Regex. In this talk he broke down Regex into its smallest pieces and explained them all, one by one, with examples. He also went through a few bigger examples. So I'm gonna copy his style of thinking and do the same in this article. Thanks to his talk I began to understand - and actually remember - the fundamentals of Regex. I now understand it so good that I actually could write the last two examples from the top of my mind. And for me versus Regex that's the major breakthrough I've been waiting for.

Normal search

Just writing normal text in a Regex will perform a normal search.

Dan - Matches the word “Dan” in a string.
Hello - Matches the word “Hello” in a string.

But the true power of Regex comes when you start using all of its special features.

Square brackets [x]

Square brackets match something that you kind of don’t know about a string you’re looking for. If you are searching for a name in a string but you’re not sure of the exact name you could use instead of that letter a square bracket. Everything you put inside these brackets are alternatives in place of one character.

Some examples:

[D]an - Matches “Dan”, not very useful.
[DB]an - Matches “Dan” and “Ban” (first letter can be "D" or "B").
[DBTP]an - Matches “Dan”, “Ban”, “Tan”, and “Pan”.
Da[ng] - Matches “Dan” and “Dag” (last letter can be "n" or "g").
[Dan] - Matches single character “D”, or “a”, or “n”. Meaning it will not match the entire string "Dan", only one single character (probably not what you wanted).

You can have multiple brackets in one string, like so:

[DB]a[ng] - Matches “Dan” and “Ban”, and also “Dag” and “Bag”.

Ranges [x-x]

You can also advance your brackets with ranges. These are especially handy when we need to validate against the alphabet or numbers. You specify a range by writing the first character, followed by a dash, and ending with the last character. 

Some examples:

[A-Z]an - Match “Aan”, “Ban”, “Can”, “Dan”, and all the way up to “Zan”.
[A-C]an - Match “Aan”, “Ban” and “Can”.

We can make it more complex by adding more to our brackets. How about multiple ranges with mixed in single characters.

Some examples:

[AC-D]an - Match “Aan”, “Can” and “Dan”.
[A-CF-G]an - Match “Aan”, “Ban”, “Can”, “Fan” and “Gan”.
[A-BF-GZ]an - Match “Aan”, “Ban”, “Fan”, “Gan” and “Zan”.

The Regex looks at each letter like an alternative to match against except when you add the dash, then it understands that the two surrounding characters and everything between them will be matched.

Some examples:

[0-9]an - Match “0an”, “1an”, “2an”, “3an” and so on all the way to “9an”.
[0-9A-Z]an - Match any “an” starting with a number or capital letter.
[a-ZA-Z0-9]an - Match any “an” starting with any number, lower case or capital letter.

Not [^]

Brackets are powerful indeed. And this is just starting it. Maybe you only know what you don’t want.

[^D]an - Match anything that ends with "an" and starts with any character except "D", so “Dan” would not be valid, but "San", "Can" or "man" would.
[^DB]an - Same as above, but also “Ban” is one of the invalid matches.

None of these two examples would allow empty first character, "an" would thus not be valid.

These “not”-searches can also be used with multiple brackets, characters, and ranges.

[^DB]a[ng] - Match anything that ends with “an” or “ag”, but must not start with “D” or “B”.
[^D-G]an - Match anything *but* “Dan”, “Ean”, “Fan”, “Gan”, but "San" and "pan" is for example valid.

Hey this is not bad. You have now taught yourself about the square brackets, multiple alternatives in them, ranges, and the not-search.

Special characters .

It's not always handy to use brackets. The . (dot) placed outside of a bracket will work as the “anything”-character. It will match numbers, letters, question marks, and everything you can think of. 

.an - Match anything that starts with something and then ends with “an”, like “!an”, “7an”, “zan”, “Ran”, “_an” and “[an”. 

The dot only matches one single character (but any type of it). If you need you can use quantifiers with it (explained more in detail pretty soon). Like .*an would match any character, for zero or infinite amount of times, ending with an. A very wide search, most likely not that useful all the time.

Quantifiers *+?

So you might like the bracket-search you wrote earlier and want to re-use it for more than just one character. Then we can use quantifiers. Let’s say for popular example that you want to validate a western style first name (just letters, for simplicity). 

[a-z]* - Match anything with letters between “a” and “z” following each other, for zero or infinite amount of times.

The star/asterisk immediately behind the brackets means “find what I just typed any amount of times”. While [a-z] only would match “a”, “b”, etc [a-z]* matches “”, “a”, “aaa”, “kjh”, “dlfkajhsdflkajhd”, and everything you can monkey-type on your keyboards alphabetic keys. It will however also accept a completely empty string since * means “any amount”, thus also “zero”. 

[a-z]+ - Match anything with at least one letter between “a” and “z” following each other. 

The plus sign takes care of that empty string problem. It means - almost like the star - that we want to match any amount, but the difference is that it can’t be zero of it!

There’s also another small possibility to improve our Regex for finding names since it doesn’t take capital letters into account. So let’s fix that.

[A-Z][a-z]+ - Match words starting with a capital letter followed by at least another, small letter. 

This would therefor match things like “Da”, “Boo”, “Gaah”, and “Xksajhds”, but not “xmn”, “762”, “c”, or “” (empty string).

With the ? character we will match zero or one, but not more than that.

a[0-1]? - Match a string being “a”, or “a0” and “a1” but never “a11” as that was too many occurrences of the number.

Quantifier summary

Let's recap the basics of quantifiers:

? = Match zero or one occurrences only.
+ = Match infinite occurrences of a character but never zero occurrences.
* = Match zero, one or infinite occurrences.

Quantifiers, part 2 {x}

But, what if you know the exact amount of times this bracket-match should occur? Like when looking for Norwegian zip-codes (always four digits). In that case we can’t use the special * or + but have to set the number explicitly.

Some examples:

[0-9]{4} - Match any number for exactly four times in a row.
[0-9]{1} - Match any number for exactly one time (same as writing [0-9]).
[12][0-9]{2} - Match anything starting with a “1” or a “2” followed by exactly two more numbers between 0 and 9.

But, what if we want to find a year in a string. A year can be written with two or four digits. Can we do that with Regex? Of course!

Example:

[0-9]{2,4} - Match exactly two or exactly four numbers following each other. So “99” is as valid as “1999”.

With the comma we can define more than one quantifier for that match. Thus covering almost any example of matching we can come up with.

So as you can see with brackets, the dot, and the quantifiers we can do pretty cool things. And this is still just the beginning.

More special characters ^$

Used outside of the square brackets the ^ and $ sign will have new meanings. And yes, this is a big part of why Regex is a bit confusing to start up with. Instead of the ^ meaning “not these characters” it means “start of the string”.

Let’s see the difference with two examples:

[0-2]+ - This will match any occurrences of at least one of “0”, “1”, or “2” starting anywhere in the string.
^[0-2]+ - This does the same as the above, except the ^ characters tells the Regex that the match must be at the very start of your string. It would thus match “12hi”, “2goodbye”, “0” but not “hi0”, “cheers 012” or “one 2 three” (which the first one would’ve matched).

Very much like the start-of-string character we have an end-of-string character: $

It’s used in the end of your Regex to signify that we match for the end of our string. If used together they would mean that only what you search for is allowed in that string, nothing else.

^[0-2]$ - Match only strings being “0”, “1”, or “2” without any other text.

Grouping (x)

All these matches you get doesn’t mean much if you need to find a specific text and extract it, or replace it. The previous examples would work fine for validation of data, if the Regex finds your “search” it will return true and thus validating the string. But, you will get even more out of Regex when you start doing replacements in strings, and to do that you need to store your matches in memory. And you do this by wrapping parts of your Regex in parentheses. In Regex this is called grouping.

(hej) - Match the string “hej” and store it in memory.
(hej|hei) - Match the string “hej” or “hei”, and store it in memory.

Use them with special characters:

test(.*)r - Match any string that starts with “test”, ends with “r”, and stores whatever it finds between (using the any-character for any amount of times), be it "" (empty string), “a”, or “osterone”, etc.

Use them with square brackets:

age ([0-9]*) - Match “age “ in string and any following numbers, storing the numbers.

Only use parentheses for things you need to access later.

Dissecting examples

Well I could go on explaining more and more about all things Regex that I've learnt from Rustam's presentation. But I’ll end now with two real-world examples, going through every little part of it.

[\/?&]test=([^&#]*)

The what now!? So let’s just take this slow. 

[\/?&]

First we have the square brackets, this means that we will start at something matching what's inside them. The two first characters are only one, as the first one is the escape character escaping the second one - a forward slash. We want to find things that start with an / but since writing just [/?&] would use the special functionality of the / character, we'll escape it first with the \ (backslash).

So basically, find something that starts with a "/", "?" or "&".

After that we see test= which basically just finds a normal text inside what we are searching. We will thus so far match on “/test=”, “&test=” and “?test=”. Maybe you can figure out that we want to analyse a URL. But what about the last part, that looks crazy.

([^&#]*)

First off, the parentheses are for grouping and remembering what is found. So the Regex-code inside here will find something and store it in memory so we can use it in some way. If we just remove the parentheses for clarity:

[^&#]*

The ^ meant “Not”. So it will not match any character that is the “&” or the “#”. You see how we by starting with an ^ negate all the following characters.

So we will match any characters that is not a "&" or a "#", for infinite amount of characters (even zero/space) - the asterisk, remember. What happens here is that what will be stored in the group is what comes after the “test=” until the string ends, or we come to a "&" or "#".

This Regex finds the QueryString “test” in a URL and stores its content. So if I used the URL example.com/page?test=hello I would have stored "hello" with this Regex.

One more example before I let you go:

^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$

Let’s break it apart and add some spaces (always recommended since it makes it more readable and easier to understand in my opinion).

^
( [ 0 - 9 ] { 2 } )
\.
( [ 0 - 9 ] { 2 } )
\.
( [ 0 - 9 ] { 4 } )
$

Let’s start with the first line. It means “start of string”, so this makes sure that what we will match comes already on the start of the line in the string and not just anywhere inside the string.

At the end we have the $ character, matching for the “end of string”. So it looks for everything between it being on a line of its own. So our matching code is the only thing allowed on the line that we will get matches on.

([0-9]{2})

I guess this is somewhat easy to dissect now. First [0-9]{2} means any number exactly two times. Remember? And with the parentheses surrounding it we’ll store that match in a separate place in memory.

\.

After that you’ll see this. Remember . was a special character meaning “any character”. But here we really only want to match the normal dot character, as used to end sentences etc, and not any character. To do that we need to escape it with the backslash. Backslash is the escape character in Regex.

([0-9]{2})\.

Now we see the pattern repeating, we’ll match and store in memory another set of two numbers. Followed by a dot.

([0-9]{4})$

It all ends with a match for a set of four numbers. Then that line should end.

This gives us a Regex that will find any date formated as a Norwegian date (DD.MM.YYYY). Each part of that date is stored on its own in the memory so if we used this in for instance JavaScript we could access what we stored as an array and then reformat that string! Pretty cool huh!? But that is not covered in this little introduction.

NB! Important to note is that this Regex example is very basic and it will allow a huge amount of invalid dates, like 99 of June in the year 9999, or day 12 of the 79th month in the year 0000, etc. But writing the perfect Regex for dates would make for a pretty over complicated example.

Closing words

That's it for now. If you find this interesting, please comment, I might go for a follow-up article. Also if you have questions or need clarifications just ask.

A very powerful and visual tool for helping you understand Regex better is Regex101. Just paste your Regex there and to the right you'll see an explanation that breaks down your Regex into the smallest possible pieces. I've found this tool extremely helpful when the Regex is a bit too complicated to interpret by hand.

My relationship to Regex (or Regexp) has always been of the type "google it, copy and paste it, don't change it, never look back again". But so, finally, after years of eating that same old "copy pasta" I went on this talk about Regex on JavaZone and actually began to understand it. And now I'll share this introduction with you.

Continue reading »