As a PHP Backend Developer I am not really into all of this Frontend Design and Development. I love to make systems speak to each other, i.e. working with RESTful APIs. Oftentimes, this is referred to the Internet of Things.

A Frontend is mainly there to make users interact with systems. And this is where the problems begin: Users behave unexpectedly and mostly not like the developer who made up the logic behind it.

Like I said, I don’t like either Design nor Development that much, but let me explain you how I am tackling both of this.

Frontend Design

Up to this point, I decided to use prepared themes for my projects, i.e. the free Start Bootstrap Admin 2. They bring in an easy-to-use and easy-to-extend base frame for your web applications. Also Laravel (which I use for most of my client’s projects) includes the CSS Framework Bootstrap, which is powered by Twitter. With Bootstrap you are all set to start working on the Frontend Design. There are even whole sets of HTML templates build upon Bootstrap for Admin purposes for as cheap as $10.

If you’re really into Frontend Design, you might want to start off with the Admin 2 theme linked above and build up your own admin template from this. For me, I’d go with a pre-built admin template, pay those $10+ bucks and save hours and hours of work getting things set up.

Even though, that’s just one side of the medal (You get the Olympic reference here?)

Frontend Development

After you set up the design it’s time to wire the data from your backend, so your Frontend actually makes sense. This is where the Frontend Frameworks pop in. There are a lot and you might have heard one of the following: Angular, Ember, React or Vue.

I made my first steps with Frontend Development back in 2014 with Angular. Soon after that I tried Ember, but could not get the hang on it, so I tried React. React is powered by Facebook, also Facebook itself is running on React. I have been playing around with React, but it quickly became very complex.
That was the moment when Laravel Spark was released, which came with a Vue Frontend. Laracasts published awesome video tutorials on Vue, so this is where I started learning Vue. And I have stuck to it.

Vue basically consists of components, which resemble a certain part of an HTML DOM and their corresponding functions for their elements, i.e. buttons. This allows you to build expressive templates, which contain just a single line of code and you can instantly see what they are going to do.

I loved the simplicity of the Vue examples. It is very easy to get started with it and if you take into consideration that there is for almost every use case a plugin, you will have an HTTP abstraction layer with Vue Resource and a state management and time-travel tool  with Vuex in just a few lines of code.

Even better if you combine all of those plugins and extensions to build an awesome experience.

Where to go from here?

Actually, it makes sense to either read the docs or get the Ebook “The Majesty of Vue.js”. And if you want to take it a step further, you should get the Vue.js + ECMAScript 6 Ebook bundle.

Hopefully, this gave you some insights on how to get started with Frontend Design and Frontend Development. This is at least how I started my way into Frontend stuff. Let me know what works best for you! Which frameworks do you use?