Getting started with modern Front-end development

The web is everywhere, standards are some where and we are lured by vaporware. Yesterday all we needed was jQuery, today Angular, ReactJS and Bootstrap seem barely enough to deliver rich experiences on fragmented mobile devices, over intermittent and insecure  networks. In addition, our users expect the future on their newest consumerware while our clients want it done in time and under budget.

our users expect that the experience on the web will compare to native applications as the distinction between the two blur

We have always had these problems yet today it feels different. The biggest problem with front-end development is trying to “go native”. This is a paradigm shift where our users expect that the experience on the web will compare to native applications as the distinction between the two blur. Think of Twitter. You wouldn’t expect a feature to be available on their website but not on their mobile app or vis versa. Web and native apps exist with unique constraints. Instead of trying to constrain ourselves to one approach (JavaScript vs Coffeescript, Angular vs ReactJS vs Ember, LESS vs SCSS vs SASS etc.) we have to learn to be flexible and embrace the pace of change. How?

  1. Using templates – getting started with a new development workflow or framework can be an intimidating experience. I remember trying out Bower and feeling confused by how was managing my files. Why was it putting my files in “bower_components”? How could I find the right file to reference in my HTML in there? When I found Bower being used by an Angular project I was familiar with I could learn by observing what it was doing. A good template will have simple steps to get started and allow you to see what is happening behind the scenes. This means you can learn by doing. For simple static sites Bootstrap and Foundation are good choices. For something more complicated let’s go to point number 2.
  2. Become familiar with package management tools. If you haven’t started using any open-source package management or generator tools, please do and benefit from the work of others. I prefer Yeoman and npm when I am looking for somewhere to start.
  3. Learn the command-line. One reason modern front-end tools rely on the command-line interface is partly a cultural one from the open-source community but also because it gives greater flexibility and performance. Being comfortable with the command-line was a gift to myself. Try out a free course and codeacademy.com and see for yourself.
  4. Find a learning platform that suits you. There are many free opportunities to join a community of experienced professionals wanting to share their knowledge (and you can subscribe to this blog). Code Academy, Code School and Udacity offer free, top-quality courses worth checking out.

Let’s take building a native mobile app using an HTML5 framework. The Ionic framework is one approach to do this and we find that the getting started documentation begins with:

$ npm install -g cordova ionic 

The example above is an instruction in the command-line using a package management tool (npm) to install a framework (ionic) and its dependencies (cordova).

I have started following and contributing to an open-source project on GitHub called the Book of Modern front-end tooling. It goes into depth about more aspects of front-end development – a lot of which is new to me – but I’m enjoying the learning experience.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s