Category Archives: JavaScript

Getting Started with Windows Phone 8 Development

Developers, Developers, Developers

Can I Have Some Links, Please.
Can I Have Some Links, Please

So, you got tools to getting started with Windows Phone 8 Development, but don’t know how to do it? How do I design my UI?  In this post I will try to answer to these questions. If you don’t know where to get tools, visit my previous Windows Phone 8 Development, Dark Side.

First Tutorial

I’m not going to  copy paste tutorials from Microsoft website here. Instead go a head visit Microsoft Development Site and make tutorial from there. Of course after you’ve read this blog post.

There’s two possible options to start:

There’s loads of resources loaded behind these two links, read them thoroughly.

Yes, you can do Windows Phone 8 Development with JavaScript. Though I’ve done WinaBlip, a Blipfoto application for Windows Phone 8, with C#. Reason is purely educational – I wanted to learn C#.

 

Port an Existing App

Surprise,  surprise, Microsoft have made tutorials and comparisons how to port your existing iOS or Android application to Windows Phone 8. Here’ s small introductory video:

Resources for porting  applications are not only Windows Phone 8 specific, but universal to whole Windows Runtime Platform. So, here’s the link to main website of porting applications:

 

Design Principles

There are some UI design principles than should be fallowed. They differ from iOS and Android and requires little a bit investigating. Some of the basic principles of UI design to Windows Phone 8 to get you started:

  • Don’t create buttons just for buttons, use UI elements as buttons.
  • Make your UI for Portrait and Landscape
  • Make your UI scale to different screen resolutions
  • Try to use UI with your thumb, if you can’t – redesign

Whole bunch of guides how to design your application properly can be found behind this link:

Take a look before you start making your million dollar app.

API

Every developer needs API description. Well, here it is, all-in-one:

 

Forum

We need forums, support from other developers. Here’s forum just for Windows Phone 8 Development:

 

Blog

If you want to fallow tips and tricks from Microsoft, subscribe to their blog:

 

Summary

Getting proper resources can be a bit tricky sometimes. Microsoft is trying to embed Windows Desktop, Phone and RT development which is causing some resources to be hidden inside Microsoft webpages. Luckily there’s somewhat active development community so you can always use google if you can’t find answer from Microsoft pages.

Here’s all links in one:

Bacon.js for Functional Reactive Programming

Bacon.jsBacon.js is FRP / Functional Reactive Programming library for JavaScript. Bacon.js solves bizarreness of RX-JS hot and cold Observables.  FRP introduces cleaner way of creating event streams from different sources combining them with means of Functional Programming.

Solving real world problems

I’m fairly new to Function Programming paradigm. I have been coding with Erlang, Haskel and Scala mostly in my spare time. Let me get this straight. I don’t like when people want to use FP because of mathematical theory. I also hate when people wan’t to code something because language is elegant or beautiful.

They’re not real world problems nor they solve any.

I think I’ve finally found a library that solves a real world problem with means of Functional Programming.  It’s Bacon.js. FRP is a paradigm that solves a problem with dependencies between different components and their communication. This is my way of looking at it. I’m not a big fan of handling DOM elements and their interaction with native JavaScript. I kind of hate it.

Let me give you a simple example of Bacon.js and what it solves:

In this example there are two input fields. Both needs to have value in order button to be enabled. Simple and very common thing to do.

Walkthrough of the JavaScript code

First we include libraries. JQuery, Bacon.js, Bacon.model.js and Bacon.jquery.js  Latter two are nice and handy cellophane to keep all easy for programmer.

After that we define two methods. First is simple and, second is nonEmpty. No need to explain more.

Bacon.js takes two input field values with  Bacon.$.textFieldValue helper funtion.

After that, map-function is given nonEmpty function which is evaluated. True/false values streamed to nameEntered and ageEntered variables.

After that and function is used to make sure that both fields are entered, hence true.

After that we bind model to some visible action – Enablig and disabling a button.  ButtonEnabled value is assigned to attr method with parameter disabled. There’s also not, because when both fields are true, we need to enable button (disabled = false).

I’m not going to go deeper details on Bacon.js because author of this library, Juha Paananen aka Raimo Hanska, has excellent blog posts and examples.

Summary

Maybe this is the turning point that my head goes more towards FP and see what other problems I can solve with it. Mathematical?

Bacon.js just rewired a part of my brain. And it feels gooood.

ps. Some of the texts are quotes from blog of Juha Paananen. Thanks.

pps. If you did not understand a word what I wrote or you wan’t to know more, please visit:
Bacon.js Github
Bacon.js Tutorial Part I : Hacking With jQuery
Bacon.js Tutorial Part II: Get Started
Bacon.js Tutorial Part III : AJAX and Stuff

AngularJS – JavaScript Swiss Army Knife

AngularJS I’ve been trying out different JavaScript libraries within couple of months. All the way from industry standard JQuery to bacon.js functional reactive programming library. Combining the best of them one can build custom library set and build your site/application with it.

Colleagues at work have been trying out AngularJS and they only have good things to say about it. I’ve been quite skeptical about JavaScript MVC frameworks since they mess with JavaScript prototype and use that for inheritance. Also messing and modifying up with DOM is something I’m not fan of.

So. I browsed to AngularJS web site and started to go through tutorial. It starts out with setting up environment which is very easy. Tutorial is based on Git branches so when navigating to next part you just switch branch.

First four parts of tutorial teaches you basic concepts of AngularJS. Importantly how data-binding works. It also teaches basic usage of testing with Jasmine which is run by Testacular.

Part five of the tutorial teaches you how to use Dependency Injections with AngularJS application. It shows how to make http request, automatically parse and bind it as model. There’s also some really good examples how to use mocks in tests.

Part six deals with pictures and links. It gives reader basic understanding how images and links are generated dynamically. It also lays foundation for navigating from wide range of data to more specific based one. There’s one more testing example in this chapter.

Part seven is about routing and multiple views. It teaches how to divide application into separate views. Views can have separate contexts which makes views quite safe to use. AngularJS includes very sophisticated Dependency Injection system. This chapter dives deeper into DI. One can say that it’s the core of AngularJS. It reminds me of Google Guice which is really lightweight and flexible DI system based on modules.

Part eight dives into showing details about initial data. It teaches how to deal with view templates. There’s one additional test to write. Because of BDD style testing, tests are very easy and intuitive to write.

Part nine shows basic usage of filters. Filters are DI Modules which can manipulate injected data. There’s also some cool example of event streaming.

Part ten is about event handlers. If you click, something happens. Easy.

Part eleven takes sample application step further. Services are introduced and low level http requests are wrapped  behind them. There’s also concept of “future” objects. When ajax request is made, “future” object is returned immediately synchronously. When asynchronous request is completed, “feature” object will be filled with data. After that AngularJS even streaming takes care of passing all data to views. Testing includes defining own Jasmine matcher.

That’s it for the tutorial. It’s excellent way to discover AngularJS. Don’t take this too seriously, but AngularJS reminds me of Java JSTL. That’s not a bad thing. I guess.

AngularJS is all a round tool for making client side MVC. It includes really easy to use concepts which are very intuitive to use. I would say that AngulaJS is like a Swiss Army Knife. It’s parts are not so powerful, but when combined into one package – it’s unbeatable. I’ve learned good lesson about how JavaScript MVC framework should work. I’m fascinated.