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
- 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.
- 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.
- 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.
- 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.