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.

What is 2 way binding in Angular.js

Many developers name 2 way binding as the main advantage of Angular.js framework. So what 2 way binding actually is and how it helps Angular.js framework to deliver better experience?

1 way data binding

The below images explain the difference quite well.

In MVC (model, view & controller) world 1 way data binding happens when controller generates view by merging model and view template. This process happens once and generated view is then sent to the client application. Once client application receives rendered view there is no easy way to automatically update this view if model data changes.

View is only regenerated once user refreshes the the app screen / page with current view. Or navigates to another application page.

The Bootstrap Framework Controversy … Should You Use It or Not?

Released back in 2011, Twitter’s Bootstrap framework is one of the most popular – if not the most popular – front-end website development framework out there, at least in 2015.

And not without a reason. Bootstrap provides a really easy to grasp way of crafting your site designs and thus allows you to create great looking and mobile-optimized builds in hours, instead of days.

Bootstrap should you use this framework

That being said, there’s a lot of conflicting opinions around Bootstrap with almost equal number of people on both sides of the barricade. Some experienced developers (like the guys over at ThemeShaper, for example) have addressed various issues with the framework and pointed out why it might not be the perfect web development solution after all.

So today, let’s look into some of the framework’s known traits, both in terms of the positives as well as the negatives. However, I’ll try not to sway your opinion in any direction by telling you what I consider the right solution here – in terms of using Bootstrap or not – but instead, I just want to provide enough insight for you to be able to make your own decision.

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.

How to Speed Up Your WordPress Site

I haven’t had the best relationship with the issue of site speed over the years, if I’m honest. I mean, even though I knew that it’s obviously important, I wasn’t doing much testing to find out how fast my site was for its actual audiences.

After all, the site loaded just fine for me (when doing administrative tasks, publishing content and so on), so it’s probably the same for my audience too, right?

Well, not quite. As it turned out, the average visitor had to wait around eight seconds (that’s 8) for my site to load. I was quite shocked to see that number, and that’s probably why I remember it so clearly.

Pages:

Useful Things