Building Angular.js Starter application

We have recently created example Angular.js web app with the minimal generic functionality. Small enough to be called framework but with built-in test cases, controllers and several views with user forms. The goal is to have a reusable foundation for Angular projects. This blog post is about how we designed Angular Starter structure.

Why Angular Starter

There are many tutorials on how to start application development with Angular.js. As well as a good few projects on GitHub with the Angular app skeletons. Like the angular-seed project created by Angular.js development team itself.

What we needed was a minimal project, with pre-built basic functionality and structure of communication with web services and APIs. And of course automated test cases.

We wanted test cases to get some special attention as we are big fans of TDD (test-driven development). Having the majority of test cases created even before any app functionality is coded is a good help to keep those bugs away.

I haven’t found the open source project which completely match my requirements and Angular Starter was born. It’s an open source project, hosted on GitHub and I welcome all suggestions and comments.

What exactly is its structure and how it can help to start your Angular apps?

Framework7 and Parse for User login

This is the the second tutorial about building Framework7 HTML5 mobile web application. In the first tutorial part we have prepared the base by creating 3 mobile application views. One of them was app user login view. In this tutorial part we will make user registration and login functionality live by enabling login view communication with Parse – cloud based backed service.

Creating Parse User Database

Now days you have many options once it comes to cloud based storage options for mobile web apps. We did a good summary on HTMLCenter a few posts ago.

For todays tutorial we are using Parse service. Parse at the time or writing supports 3 main functions – Core for data storage and user management, Push for push notifications and Analytics for logging different app events. They have free tier available for starting apps – it allows for up to 30 requests per second throughput and has 2TB data transfer limit per month. I’m sure we will not need this capacity in our tutorial!

Go ahead and create a free account on Parse. After you signup / login you can create new applications. I created one called framework7test dedicated for this tutorial. You can see it below.

HTML5 frameworks for mobile web applications

We are starting the series of tutorials and short reviews about popular HTML5 mobile frameworks. In this post we are discussing why would developers use existing mobile web framework instead of building one from the ground up.  And we are creating simple mobile web application with Framework7. The second tutorial part we use Parse.com cloud service to integrate user login.

Mobile web applications allow us to quickly design and develop prototypes, reuse already written code across multiple mobile platforms and in many cases match look & feel for customers using wide range of devices with different operating systems.

PhoneGap plugins for mobile application projects

PhoneGap is hybrid HTML5 mobile application framework which has nicely growing user community.

Here on HTMLCenter we have published several tutorials about designing and developing Cordova / PhoneGap based HTML5 mobile applications.
One of the main strengths of PhoneGap undoubtedly is the native plugin functionality. It allows developers to hook the native mobile OS components with HTML5 and JavaScript code. This way you can use JavaScript methods across the app to access functionality provided by native code.

In fact, any other developers using PhoneGap framework can just import your plugin and use the functionality in their own apps. Developer community has created many such plugins. And Cordova contributors have developed plugin manager called plugman in order to make installation of plugins simple.

There are several plugin repositories which collect and archive PhoneGap framework plugins.

While working with iOS and Android applications I have used several PhoneGap plugins and want to share some of them which helped me a lot in mobile app projects. Did I miss any good ones?

Node, HTML, JavaScript and Hackathons

These days creating a new piece of web or mobile software feels a lot like combining already made pieces together. Adding some glue so they do not fall apart, releasing version v1 and repeat the loop many times. Until you are satisfied that nobody cares or that you have actually built something useful.

Agile, lean and other tech product methodologies have thought us to use this process. And ever increasing modular nature of web and back end frameworks make it easy to follow these steps. Many hours are already spent by community of smart people while creating all the reusable modules for your future app.

Good example to illustrate this trend is Hackathon Starter project. Its created for people building web and mobile apps with help of Node.js. As the name suggests it was created as reusable prototype for hackathon projects. In hackathons you usually have ~24 hours to create a somewhat working project. As this template is beefed up with main modules it will save lots of time and will let you concentrate on the specific functionality you want to achieve.

Great OAuth tutorials for HTML5 applications

Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.

It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.

Pages:

Developer Resources