Mapping Options with Angular 5

Just did a quick search on Angular components for either Google Maps or OpenStreetMap. For Google Maps the choice du jour seems to be Angular Google Maps (Git repo). A neat little blog post on how to get started is here.

When targeting OpenStreetMap, Leaflet.js is still the most popular library out there. While it is "just" a JavaScript library, you can use it directly in your Angular project or use dedicated components, of which the following 2 seem worthwhile to investigate further:

• YAGA - leaflet-ng2
• ngx-leaflet

AngularJS + Karma - Loading JSON Files for Mocking HTTP Responses

In order to kick-off AngularJS projects, I have been looking at generator-gulp-angular lately, which you can find at:

https://github.com/Swiip/generator-gulp-angular

When doing your unit tests, it is quite convenient to mock HTTP responses using JSON files. However, having your unit tests load additional (JSON) files may not be super obvious using the Karma test runner.

bower.json

For the task at hand, I am using jasmine-jquery which provides “jQuery matchers and fixture loader for Jasmine framework”. Add that dependency to your bower.json file:

"devDependencies": {
  …
  "jasmine-jquery": "2.1.1"
}

karma.conf.js

Now we need to do some additional configuration for Karma. By default, generator-gulp-angular wires the needed files up with:

return wiredep(wiredepOptions).js
  .concat([
    path.join(conf.paths.tmp, '/serve/app/index.module.js'),
    path.join(conf.paths.src, '/**/*.spec.js'),
    path.join(conf.paths.src, '/**/*.mock.js'),
    path.join(conf.paths.src, '/**/*.html'),
    {pattern: path.join(conf.paths.src, '../mocks/**/*.json'), watched: false, included: false, served: true}
  ]);

In order to make your JSON file available, add

{
  pattern: path.join(conf.paths.src, '../mocks/**/*.json'),
  watched: false,
  included: false,
  served: true
}

So that it becomes:

return wiredep(wiredepOptions).js
  .concat([
    path.join(conf.paths.tmp, '/serve/app/index.module.js'),
    path.join(conf.paths.src, '/**/*.spec.js'),
    path.join(conf.paths.src, '/**/*.mock.js'),
    path.join(conf.paths.src, '/**/*.html'),
    {pattern: path.join(conf.paths.src, '../mocks/**/*.json'), watched: false, included: false, served: true}]);

Mocks is a directory in my project’s root folder. Customize as needed. For further details see:

http://karma-runner.github.io/0.13/config/files.html

Now, you're ready for testing. In your spec aka unit test file, in the beforeEach:

beforeEach(inject(function (_$httpBackend_, _$rootScope_, $controller) {
…
}));

you can now mock up the $httpBackend:

jasmine.getJSONFixtures().fixturesPath='/base/mocks';

$httpBackend.whenGET('http://localhost:9876/api/plants').respond(
   getJSONFixture('plants.json')
);
$httpBackend.whenGET('app/components/plants/plants.html').respond('');
$httpBackend.flush();

TypeScript versus ES6

A good question is: Why would you want to use TypeScript versus ES6?

A few reasons for me:

• I have to use a transpiler anyway in order to support older browsers such as Babel
• TypeScript gives me types
• You can still use JavaScript as valid TypeScript (TS being a superset of JS)
• It seems to be a more natural fit for Java developers
• Tooling support seems pretty good
• AngularJS 2.0 will use it natively - as such you have Google and Microsoft supporting it

Resources

Will ES6 make Typescript irrelevant?
https://www.reddit.com/r/javascript/comments/31qocr/will_es6_make_typescript_irrelevant/

TypeScript vs ECMAScript 2015/2016
http://ilikekillnerds.com/2015/07/typescript-vs-ecmascript-20152016/

TypeScript and ES6 Dan Wahlin & Andrew Connell

Angular Air Episode 25: TypeScript or ES6 with Babel?

AngularJS 1.x and TypeScript

I did a bit of research today on TypeScript. As it is favored (but not required) for the upcoming AngularJS 2.0 release, I wanted to dig a bit deeper. Keep in mind that as of Oct 2015, AngularJS 2.0 is still a pure alpha version and even new projects shall continue using AngularJS 1.4.

Nonetheless, it looks like TypeScript is a viable option even for the latest 1.4 version. In fact, Yeoman now provides an Angular starter (generator-gulp-angular) that gives you the option to use TypeScript as your language of choice.

Here are some resources that I thought were helpful:

http://www.developerhandbook.com/typescript/writing-angularjs-1-x-with-typescript/

I believe, that particularly for Java Developers, TypeScript could be quite interesting - as you have much better type-safety compared to using plain JavaScript. See the following blog entry by Veit Weber:

Why Java Developers might love TypeScript

There is a good presentation by Sander Mak from JavaOne: "TypeScript for Java Developers: Coding JavaScript Without the Pain" on that subject as well:

A longer version:

As you can have a much better OO experience with TypeScript, I think it will be also quite interesting to use rich domain objects with AngularJS rather than using JSON structures directly when retrieving data from your REST endpoints.

There is a great presentation by Gert Hengeveld from NG-NL 2015.

Slides: 

https://docs.google.com/presentation/d/1cbNH2WHO8WzF1XKPxMJ3gJXmfKnWAl3cN77eJJJdAEw/present?slide=id.p

Blog Post:

https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc

Convert JSON Structure to TypeScript Classes

If you create TypeScript classes that need to handle JSON, the follow online tool to generate TypeScript interfaces from JSON might be of interest:

http://json2ts.com/

TypeScript type definitions

I still need to wrap my head around TypeScript type definitions. They basically bolt on type definition for libraries that are not inherently based on TypeScript. There is a repository for them:

https://github.com/borisyankov/DefinitelyTyped

Digging Deeper - RequireJS and ES6 Modules

I was exploring RequireJS and ES6 Modules some more this weekend. Originally I started to explore how I can use richer domain objects (classes) as part of our AngularJS application that uses RequireJS for modularization. As part of that endeavor, using RequireJS looks like an interesting approach to inject classes into the application (Remember that AngularJS injects class instances ;-)

Here is a list of interesting resources that I came across.

RequireJS Basics

In order to get a refresher/introduction to RequireJS, I found Rob Dodson's RequireJS -- Embracing the Awesomeness of Asynchronous Modules quite nice:

• https://www.youtube.com/watch?v=vWGuaZOTR4U

Integrating AngularJS and RequireJS

Thomas Burleson's Angular and RequireJS from ng-conf 2014 was high on my consumption list. I think his explanation of how RequireJS relates to AngularJS was perfect.

• https://www.youtube.com/watch?v=4yulGISBF8w

I thought his code example was a tad on the complex side, though (Meaning I may need to revisit it ;-). For practical purposes, I then discovered Burke Holland's Requiring vs Browserifying Angular which I think is the nicest tutorial I came across:

• http://developer.telerik.com/featured/requiring-vs-browerifying-angular/

The tutorial also underlines the point that using AngularJS and RequireJS is not for the faint of heart. It has its challenges. Maybe I need to look at Browserify?

One challenge I came across this morning for example,  is to make angular-masonry work with RequireJS. I was able to solve that challenge using this Stackoverflow posting:

• http://stackoverflow.com/questions/18295459/requirejs-with-jquery-masonry-imagesloaded-object-object-object-has-no-me

Whats is coming with ES6 Modules

When looking at modules, it does not take long to come across ES6 Modules, the next hot thing coming our way as part of ECMAScript 6 (see Using ECMAScript 6 today)

First I watched Browser Package Management (by Guy Bedford):

• http://www.confreaks.com/videos/3231-mwjs-browser-package-management

He also has a nice blog post:

http://guybedford.com/practical-workflows-for-es6-modules

Another good video was Guy Bedford's talk: Package Management for ES6 Modules from JSConf2014:

• https://www.youtube.com/watch?v=szJjsduHBQQ

What was interesting to learn, is that with SPDY, the bundling of web-resources won't be necessary anymore (eventually). See Multiplexing with SPDY and HTTP/2 for explanations:

• https://www.youtube.com/watch?v=J_BxVEOVRNw#t=1303

So here is what is next for me...I need to look at the following projects and see how all this is usable today. Certainly looks fascinating being to use ES6 features right now, also keeping in mind that AngularJS 2.0 will use ES6 modules.

• https://github.com/ModuleLoader/es6-module-loader
• https://github.com/systemjs/systemjs
• http://jspm.io/

jQuery UI and ThemeRoller

I use jQuery quite extensively in my projects these days, but I kind of ignored jQuery UI for too long. The last two days, though, I finally got more into jQuery UI, after I was looking for a modal dialog component and realized that jQuery UI provides a very nice implementation by itself.

I haven't done much directly with the available components (except the dialog component), but
I was very much impressed about the way you download jQuery UI. They call it "Build Your Download" which let's you pick and choose which components of jQuery UI you may want to use and it creates a customized download bundle for you.

But substantially more impressive is "ThemeRoller", which not only let's you select between various themes but also allows for editing and creating new themes. All changes are applied right on the spot and once you're done you can include the theme in your customized jQuery UI download.

From there I discovered that jQuery released a new CSS Framework called "jQuery UI CSS Framework". It looks quite promising and I wonder if it might be applicable for my pet project. I certainly need to learn more about it...it would be nice if it could serve as the main CSS for my web application and therefore allow for easy theming of the application.

Anyway the docs can be found at http://docs.jquery.com/UI/Theming/API and the wiki pages are located at http://jqueryui.pbwiki.com/jQuery-UI-CSS-Framework

There is also a themeswitcher component available.
http://docs.jquery.com/UI/Theming/ThemeSwitcher

Lastly there is an interesting article on the blog of filament group, one of the main sponsors of jQuery UI, about styling buttons and toobars.

Book Review: jQuery in Action

jQuery in Action by Bear Bibeault and Yehuda Katz is an excellent book for learning the jQuery JavaScript library. In my opinion the book is suitable for beginners as well as advanced developers that like to explore jQuery. It is also a good reference book as it describes all the essential functionality offered by jQuery in a nicely structured manner.

I belong to the category of developers that used Prototype in the past. The funny thing is though that both libraries offer almost identical sets of functionality. You may ask why did I decide to go with jQuery?

I like its innovative way of querying for page elements and to iterated over them, allowing you to often accomplish multiple tasks with just one line of code. jQuery in Action starts out explaining those core concepts of jQuery in the first 3 chapters of the book - allowing to query for page elements using the CSS syntax, how to manipulate page elements as well as how to work with collections of elements. The book does a very good job explaining those aspects of jQuery combined with many useful examples.

What also drove me to jQuery was the fact that it has a plug-in mechanism that allows you to either use additional third party add-ons or to write your own plug-ins by still adhering to the spirit of jQuery.

In that regard it is also worth mentioning that the jQuery website is "really nice" with a ton of documentation and also providing a plugin-repository, something Prototype is lacking. Thus, for the majority of your JavaScript needs, there is now a one-stop place to get it all.

Unfortunately, the authors do not provide a comparison between both wildly popular javascript libraries Prototype and jQuery even though Bear Bibeault has been a coauthor of Prototype and Scriptaculous in Action. It would have been nice if chapter 1.1 Why jQuery detailed some pros and cons in that respect.

Generally, throughout the book, the authors encourage certain valuable patterns you should follow to write good unobtrusive JavaScript code using jQuery. I particularly like that aspect of the book as it shows you efficiently how to separate page markup from JavaScript code.

In that regard it would have been nice, though, if the authors had mentioned YSlow as another tool to analyze you page markup, which includes the recommendation to place JavaScript at the bottom of your page rather then on the top, if possible.

Anyway, there shouldn't be any need to declared the onclick attributed on page elements directly any longer. It all can be separated using JavaScript events which is well described in the book.

Speaking of handling JavaScript events, I think the authors should have further mentioned the concept of event delegation. Instead, they describe how to use the Live Query plugin in order to solve a similar issue. After reading the respective chapter, I was going to further dive into Live Query but a fellow blogger pointed out NOT to use Live Query as "it is very performance heavy" but rather to use event delegation.

I guess this is a drawback writing a book about a subject that is evolving with the speed of light.

Nevertheless, despite all my critical remarks, I think that jQuery in Action is an excellent book that will help you learn and understand jQuery. I certainly enjoyed reading the book.

jQuery - Creating Modal Dialogs

I am still working my way through the jQuery in Action book and I still need to write a review on it...soon....
Well, this weekend I was checking out several jQuery plugins - In my home project I needed to replace a few old-school/legacy JavaScript confirmation boxes with something more stylish looking. While jQuery by itself is very nice, its plugin mechanism and consequently its plugin repository is simply impressive. There is almost too much choice ;-) Anyway, there were several plugins for creating modal dialogs. I finally settled on SimpleModal - So far it worked quite well and the documentation is helpful, too.

The next plugin I have to look at is Live Query. I use a few Ajax driven data grids that return DOM nodes to which I would like to attach events. Live Query watches out for those node changes and applies some magic to make it work.

Addicted to YSlow and what Jawr can do to help

At the No Fluff Just Stuff (NFJS) conference I attended 2 weeks ago, somebody mentioned YSlow, which is a tool for analyzing websites in regards to performance and is a plugin for Firebug. Hence, this week I spent some time using it and fixing the issues YSlow found on my project.

It is really nice and almost addictive...YSlow grades the performance of your website in a number of categories. There is a good site at yahoo explaining those categories called: "Best Practices for Speeding Up Your Web Site".

For example, you should always put CSS at the top of your web pages and JavaScript files should be at the bottom. While this is easy to fix, the recommendation to reduce HTTP request is a bit trickier to fix.

Well, let's assume you implemented a typical Web 2.0 website using a few Javascript libraries such as Prototype, Scriptaculous as well as your own Javascript files. Furthermore, you broke your CSS into multiple files because otherwise you would simply lose control over it entirely.

That of course causes a lot of HTTP requests when loading the files and thus leads to a degradation of your website's performance.

But luckily if you write Java based web applications there is a really cool library out there called Jawr that let's you bundle up (combine) your Javascript and CSS files. Not only that, Jawr also minifies your Javascript and CSS files plus it is able to GZip the files as well. Jawr also provides a nice quickstart tutorial and lastly Jawr also has a tutorial that explains how to use it with the big JavaScript libraries such as jQuery, Prototype, Scriptaculous and Yahoo! UI library.

Lightbox gone crazy...

If you think there are too many Java web-frameworks out there - check out the market for JavaScript Lightbox libraries:

http://planetozh.com/projects/lightbox-clones/