Going native on the Web

The web is everywhere, standards are somewhere 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 consumer ware 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

The current 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 blurs. Think of Twitter. You wouldn’t expect a feature to be available on their website but not on their mobile app or vis versa. Yet 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?

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 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.
Become familiar with package management tools. If you haven’t started using any open-source package management or generator tools, please do. You will benefit from the work of others. I prefer Yeoman and npm when I am looking for somewhere to start.
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 from me to myself. Try out a free course and codeacademy.com and see for yourself.
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.

Going native on the Web

Comments

More from this blog

Re-re-re-re-factor

Applying marginal gains theory to tech debt

Troubleshooting CORS errors

7 Lean principles to supercharge your productivity

Starting with a health route

Command Palette

Comments

More from this blog