MattHicks.com

Programming on the Edge

Mobile Development Hell

Published by Matt Hicks under , , , , , , , , on Friday, July 31, 2015
I've been writing a pretty large mobile application for a client recently and am finally getting close to releasing it, but thought it might be worthwhile to write a little bit about the experience I've had.

The Frameworks


I expected jumping into development for Android and iOS would be fairly straight-forward. Mobile development has been around for quite a while now and there dozens if not hundreds of tools to get the job done.

I began researching frameworks that would allow me to have a shared code-base across Android and iOS and was disturbed at my options:

Option 1: Write Two User Interfaces


Using RoboVM you can deploy your JVM-based application to iOS without any noticeable performance penalty, but you must still create your user interface for each separately.  In many cases this is preferred if you want to maintain compliance for device-specific standards.  However, in my case the client had a very rigid design that they want to see on both devices and writing it twice just seemed painful and wasteful.

Option 2: Phonegap


There is a huge trend for Phonegap and derivatives that let you write your mobile application in HTML and JavaScript and then deploy it to Android and iOS.  In some ways this is a compelling option since you have standards-based tools that you can use to create your user interface and can even potentially reuse some functionality from your web application.  However, on closer inspection the performance is horrible and the UI feels very clunky.  I have yet to see an application written using this methodology that feels like a native application.

Option 3: Write a Game


I'm fairly well known for taking the road less travelled and will write entire libraries to do something "the right way" in my opinion.  After rejecting the above options I realized the only common UI target between Android and iOS is OpenGL ES.  This is the graphical library games are built on and though it might seem like a crazy idea, I created a simple prototype to see if I could write a UI framework on top of it.  Though incredibly painful to write the preliminary foundation, it worked quite well.

Writing an Engine


In an effort to support my app development needs I began to write a framework that provided complete UI functionality using OpenGL ES so I could have a common User Interface.  At this point that framework has been developed out pretty far and I'm extremely happy with the results.

LibGDX


I chose to build on top of LibGDX as it provides some basic building blocks for UI already, although extremely limited and focused toward game development.  I build my framework to add all the niceties for transitions, components, dynamic font loading, etc. to provide for my UI needs.  One of the big wins here is that I am able to rapidly test on the desktop without having to run an emulator or deploy to a device.

PSD to Scala


I love writing Scala code and decided to build this application entirely in Scala. However, the design mockups were created in Photoshop.  This is a common problem converting from design to implementation.  I decided to write a tool that would load the PSD file and allow me to customize options and then export to generate a screen in Scala.  This provided me with the ability to take a design mockup and create a perfect 1 to 1 representation in the final product.  Additionally, this saved me a massive amount of time as I simply needed to integrate the real data with the design then.

Bitmap Font Service


One of the biggest problems with User Interfaces in OpenGL is drawing fonts. The most common way is to use Bitmap Fonts that is a rasterized image representation of all of the characters instead of the vector data you get with a true-type font.  In order to properly support this I created a web service that the mobile app could request fonts from and it would dynamically generate the Bitmap Font on-demand to deliver back to the mobile app. The mobile app could then cache the data for future use.

Scaling for Screens


Another huge problem on mobile devices is that the screen sizes are so wildly different from one device to another.  After lots of consideration I wrote a scaling framework that takes in a virtual width and height that the application is designed for and the content is automatically scaled to properly and intelligently fit to the screen.  For raster images this means some dynamic scaling or multiple size options if pixel perfection is desired.  For fonts it simply means that the font size is scaled before making a request to the Bitmap Font Service so that the font is properly scaled according to the dimensions available to it.  The result is an incredibly clean looking UI at any resolution.  Additionally, since I only have to think about my virtual width and height, layout is incredibly easy.

Next Steps


At this point I now have a pretty powerful engine for mobile application development. One that rivals any framework I have seen to-date.  The question is: what do I do with it now?

I'm considering open-sourcing it to allow anyone to use it, but it's entirely written in Scala, so the audience that would take advantage of it is relatively low.  Another option is to continue to improve it as a closed-source project and focus more on providing OUTR Technologies the capability of creating more powerful mobile applications.

Update


Almost immediately after posting this I received several requests from people that were very interested in using the framework so here you go:

https://github.com/outr/outrgl

It's very rough and needs lots of documentation as it was written entirely for internal use but that will change as I go forward. I'll try to create a G8 project to help create new projects in the near future. 

Mocking should be Mocked

Published by Matt Hicks under , , , , , on Wednesday, February 25, 2015
I've worked with and for a lot of companies over the years and with the ones that actually care about unit testing Mocking (Mockito or some other variation) typically quickly enters the scene. My argument is that in proper coding you should be able to write proper unit tests without any mock objects. I'll go a step further and say that encouraging mocking in your tests actually encourages poor code quality.

What's the purpose of Mocking?

Mocking is extremely common in unit tests, but why?  The basic idea is that you are attempting to test one specific "unit" of functionality, but you don't want calls to the database, third-party calls, or other side-effects creeping into your unit tests. On the surface this seems like a valid use-case.

Why is Mocking bad?

There are many problems related to mocking that I'll try to quickly step through.

Unnecessary Complexity and Decreased Modularity

Though the purpose of mocking is actually to reduce complexity it very often increases the complexity of your unit tests because you often end up with confusing and complicated mocking to avoid running aspects of your code that you don't want executed in your tests.  You often end up pulling your hair out trying to figure out how the internals of the system are supposed to work in order to get the mocks to operate as expected and then all your tests start breaking as soon as that internal logic changes.  You often end up in a scenario where your code works fine because it's written modularly to continue working but your unit tests break because they are essentially implementing the internal functionality via mocks.

Unit tests testing the Mocking framework

In extremely complex unit tests or even simpler unit tests that are managed over a long time or through many developers it becomes more and more confusing what the purpose of the test actually is. I can cite dozens of examples where I've been auditing unit tests only to find out that the unit test does nothing but test the mocking framework instead of the code.

Need for Mocking Represents Bad Code Separation

This is what my entire complaint really boils down to.  If you actually need mocking in your unit tests, your actual code that you're testing is poorly written in the first place.  You should be writing code in proper units to allow individual testing without the need for mocking at all.

For example:


You might have a scenario similar to the code above and you want to test the checkout functionality of your system, but you don't want the payment gateway to be called and you don't want it actually persisting to the database so you might mock those out to avoid those being called. Instead, consider the idea that there are four units of functionality clearly defined in this case:
  1. Validating the Order
  2. Calling the Payment gateway
  3. Persisting the information to the database
  4. Creating a Receipt
Herein lies the problem. You have tight coupling in your code of dissimilar things making mocking necessary. If instead you were to refactor your code to look more like this:


You can see now that each unit of functionality has been broken out into its own method that can be individually tested as needed without the necessity of mocking. Further, the code is significantly cleaner and more maintainable as a result of this refactoring. Not only does it make our unit tests cleaner and easier to maintain without mocks, but it also enforces a higher level of code quality through modularity in your code than was there before.

If you ever decided that the checkout method needed to be unit tested you could refactor it so it takes in a PaymentGateway implementation and Persistance implementation as arguments to avoid side-effects and allowing a test instance to be created to fulfill those needs. Though this is a form of mocking, it follows a better paradigm of consistency and modularity than mocking frameworks do.

As you can see, this is an all-around better way to write code and though it is understood that in existing projects mocking still may be necessary, there is no excuse for such to be necessary in new code.

Nabo TV: Next Generation Media Center

Published by Matt Hicks under , , , , , , on Monday, December 01, 2014
https://www.kickstarter.com/projects/matthicks/nabo-tv-next-generation-media-center

For years media centers, DVRs, and video streaming sites have existed to watch TV and Movies. Over the past several years these services have stagnated. Though there are no shortage of media centers, they all seem to be doing pretty much the exact same thing. For years we have watched and longed for a more featureful interface on our TV to be able to watch the content we're looking for, and for years we have been disappointed.

This is where Nabo TV comes in. We want to bring innovation back to the TV and push the boundaries of what is currently being done on the TV, not just as a product company, but as individuals who enjoy watching media on our TVs.

https://www.kickstarter.com/projects/matthicks/nabo-tv-next-generation-media-center


I just started a Kickstarter to help fund and increase visibility for this endeavor.  Please help me get the word out.

Why Templates Suck

Published by Matt Hicks under , , , , , , , on Thursday, September 26, 2013
The Problem

I've been asked a lot recently about what template engine I prefer and most people seem shocked when I say that I do my best to avoid them and just generally don't like the idea of templates.  Let me first define what I mean by templates before I get into my explanation so there's no confusion.  When I refer to "Templates" here I'm talking specifically about user-interface templates and primarily HTML templates.  My definition of a template in this context is a mechanism for allowing dynamic content to be incorporated into design.

The Good

To your average designer or developer I'm sure the immediate response is, "But templates can save so much time!" and they are correct.  Templates are definitely an improvement over developers generating UIs dynamically.  Templates exist for the specific need of collaboration between designers and developers.  This has always been a big problem as designers generally don't know the programming languages the developers are using and the developers don't have the creative design skills to be creating user interfaces.  The solution provided by templates is a dumbing down of the dynamic contents (developer side) that allows designers and developers to interact via templates so both can continue to work effectively and collaboratively.

The Bad

Here are the primary points I have against templates:
  1. Templates are a dumbing down of your programming language by definition. You cannot accomplish everything you can in your language of choice in a template.  This leads to multiple layers of abstraction and increases the complexity of your application.
  2. Templates often try to solve #1 by incorporating WAY too much of the language and thus become increasingly complex and painful for designers to utilize.
  3. Templates are yet another "language" you have to learn and maintain.
  4. Templates never find the right balance. Templates either focus too much on keeping it simple and thus create severe pain for developers for their lack of capabilities or they incorporate way too much and become impossible for designers to understand.
  5. Templates generally require (though not always) a server-side technology to process and populate data into.  This means your designers can't work on the user interface without requiring a server to run it on. This not only makes set up for a designer much more complicated, but it decreases their ability to make quick changes and see the results.
 The Awesome

Hopefully I've effectively shown the problems with Templates, but I have yet to offer a better alternative.  Yes, I believe one does exist and I've been developing this way for over a year and it is being utilized effectively with several production sites (ex. http://www.projectspeaker.com).  The idea is to allow designers to work with HTML and create representations of the content for the site independently of the developers.  The developers then manipulate the content in code before delivery.  Hyperscala was an ideal framework to support this type of development since it allows interaction with HTML, CSS, and JavaScript in a type-safe infrastructure so you can manipulate the DOM without impacting the designer's work.  For an example of this take a look at my post comparing Hyperscala to Play Framework (http://www.matthicks.com/2013/01/hyperscala-why-not-play.html).

Hyperscala: Web Site

Published by Matt Hicks under , , , , , , , on Monday, March 18, 2013

I have been negligent giving proper support to Hyperscala's public appearance and have spent the past several months working on the API itself. However, today I finally released a very basic web site at hyperscala.org:

The site is incredibly basic right now and not all that pretty but it is written in 100% Hyperscala and has links to the source code on Github on every page along with working examples.

Feel free to ping me if you have any problems with the site or something is missing that would help make the site better.

case class Scala

Published by Matt Hicks under , , , , , , , on Tuesday, February 19, 2013

I've been pretty busy the past few weeks with clients and haven't had much time to blog. Last week, however, I gave a presentation to the OKC JUG (Java Users Group) about Scala. As anyone that actually reads my blog must know, Scala is my primary language and I absolutely love it. This week since I don't have a lot of time to delve into anything complex I'll simply share my presentation slides comparing Scala and Java code:

It is amazing how much more simplistic tasks can be accomplished in Scala versus Java.

Hyperscala: Why not Play?

Published by Matt Hicks under , , , , , , , , , , , on Wednesday, January 30, 2013

This article is continuing in the series on exploring Hyperscala. If you have not already done so, I would highly recommend reading the following previous posts as many topics discussed here build on concepts previously discussed:

The Play Framework is perhaps the most popular web framework among Scala developers today. I have been asked quite a few times what is wrong with Play that made me decide against using it and instead write my own web framework. To be fair, Play is a pretty awesome framework and is a great choice for web applications. However, there are a few problems I have with it that led me to choose against using it moving forward:

Templating Language
Though Play does a far better job of this than pretty much anyone else I've seen, you're still dealing with special syntax in your HTML templates for accessing your Scala code. This is incredibly problematic when there is a separation of designer and programmer. Life becomes quickly more difficult when the programmer injects all the Play-specific code into the HTML file that came from the designer and then the designer needs to make a change. Not only does it become difficult for the designer to even preview what the content should look like now, but it is highly likely that the designer will mess something up when they are trying to make changes to the HTML. This was something I spent a lot of time considering and trying to come up with a better solution for in Hyperscala. I have worked at a lot of large companies that have teams of designers and teams of developers and it is incredibly painful bridging that gap. In Hyperscala there are actually several solutions to this problem, but the best one for this specific scenario, I believe, is DynamicContent. We've discussed this in a previous post and demonstrated it in yet another post. The idea is keeping the HTML clean and pure and the developer simply loads in only what they need to manipulate by the HTML 'id'. In my opinion, this is the simplest solution and a much cleaner separation between the designer and the developer.
Modularity
Yes, there is module support in Play, but it is confusing at best and extremely limited at worst. There is an inherent problem in any framework that doesn't have complete control over the HTML and Play simply does not. The way Play works is very similar to JSPs where content is injected but the HTML is never parsed or comprehended. This leads to several problems when you have modules that need to introduce something like jQuery but shouldn't load it multiple times and want to avoid an issue where another module is trying to load a different version. These are complicated issues that need to be dealt with in large web applications. In Hyperscala the Module system is incredibly powerful and solves all of these problems incredibly well. Not only that, but a Module in Hyperscala is dead simple to write and even more simple to use.
Complicated Setup
Any framework that needs its own console in order to create an application is too complicated. Yes, I agree that it's cool that the Play framework has its handy-dandy console utility to create your application for you, setup your IDE, and probably even brush your teeth for you. However, I very much dislike "magic" that happens and is unexplained. I prefer to understand what is going on under the hood and though you can do this in Play, the decision was made as a default route to hide this from the developer. I prefer to work with frameworks in which you add a Maven dependency and then start writing some code. I don't want configuration files. I don't want a bunch of boilerplate code that is generated on my behalf. I want to instantiate something and run it. This is exactly what Hyperscala does. Once you include your Maven dependencies for Hyperscala you need only create an implementation of Website and add a Webpage to be up and running. In Play you have a minimum expectation of an Application.scala, index.scala.html, application.conf, and routes file.

In an effort to compare Hyperscala with Play practically I decided to take an example from Play and re-write it in Hyperscala. My hope was for a simple 'Hello World' example to keep it simple and straight-forward, but what Play considers their 'Hello World' example is quite a bit more than that. It will have to do.

First lets take a look at the Application.scala file:

This is fairly simple. The idea is that this page asks you for your name to display, the number of times to repeat it, and a color. When you hit submit, it validates the form (based on the validations specified near the top of the page) and then either displays errors or writes out the name you specified the number of times you specified in the color you specified. Notice here that the form validation process is hard-coded, so no special handling is necessary. I point this out now because in Hyperscala there is no "default" for how validation should be handled so it takes a little more code (but not much).

Next we take a look at the HTML files defined for the display.

hello.scala.html index.scala.html main.scala.html

It's fairly clean and I'm sure once you get used to the Play syntax it becomes easier to grasp. However, this would be quite difficult for a designer to work with. I'm sure there is a better way to represent the page for designers, but then you obviously lose out on much of the power of Play.

Now lets take a look at how this same functionality would look in Hyperscala. Like I've said several times now, there are many ways to accomplish the same task in Hyperscala and this is just one way.

First lets look at the HTML, since this is what we really should start developing from. We can focus on getting the design exactly how we want it before we even think about Hyperscala:

play_hello_world.html

This is our basic HTML for the page. Notice there is absolutely nothing specific to Hyperscala or non-HTML in the file at all.

play_hello_world_configuration.html

I've extracted the 'configure' page out into this snippet because we're not only going to replicate Play's Hello World example, but we're going to leverage the Realtime module of Hyperscala to avoid doing a POST and thus keep you on the same page for the entire experience. I could have replicated the form posting utilizing FormSupport mixin, but hopefully this will work as a good example of how easy real-time communication is in Hyperscala. Again, notice that there's nothing special about this HTML. It can easily be previewed in the browser and edited by a designer.

Now, lets take a look at our Scala code:

PlayHelloWorldPage.scala PlayHelloWorldConfiguration

Not much to see that hasn't already been explained in past examples but there are a few things of note. First, notice the call to Realtime.connectStandard(). This, as the scaladocs says, connects all inputs, textareas, and selects to fire change events and buttons to fire click events to the server. We can do this manually, but this saves us a few lines of code. The other thing of note here is the adding of validation. The 'addValidation' method is received as an implicit conversion on FormFields (input, textarea, and select) by importing org.hyperscala.ui.validation._. We utilize some built-in validations and use the ClassValidationsHandler to apply the error class to the outer container and set the message to the error container when validation fails on a field. Like I said before, how validation works in Hyperscala is not built-in, it's part of the UI sub-project and defines some convenience functionality of how error might be handled, but opens the door to supporting validation errors any way you see fit.

In conclusion, I would argue that while in this example the lines of code may be equivalent, the benefits should be seen particularly for larger applications and for interaction with designers. I do not want this to come off as me bashing Play Framework. I have nothing but respect for the framework and the developers that created and use it. My purpose in this post is merely to compare and contrast the architectural choices in one framework against another and to hopefully better explain why I believe Hyperscala to be a better framework in many situations.

Source code referenced for the Play Hello World example came from Play samples on github:

Source code referenced for the Hyperscala comparison came from Hyperscala examples on github: