Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
- Front-end development
- Command line interface (CLI) applications
- Desktop (GUI) applications
- Mobile applications
- Back-end development
- Any combination of the above
Developing the user facing part of websites has become increasingly complex by becoming highly interactive and offloading traditional server-side tasks to the front-end. It was once unfathomable that we’ll be running the likes of Google Maps, Spotify or YouTube in our web browsers but here we are, with a varied toolset to make complex web applications.
Front-end web development has grown exponentially in the last few years and I’ll offer just a glimpse of that here.
The Basics of Front-end Web Development
jQuery started a revolution with abstracting the aforementioned browser features and making DOM manipulation easy while also bringing quite a few utilities to the table.
Efficiency Through Frameworks
With the growing complexity of websites and websites growing to web applications, there was a need to address the complex issues of web applications (state handling, data binding, view rendering, etc.). Many frameworks rose to that challenge and two that are probably most popular today are AngularJS and React.
It’s clear that Angular and React gained such traction since the former is backed by Google and the latter by Facebook. While Angular contains the whole MVC paradigm, React is somewhat leaner and mostly considered the V of MVC.
New frameworks show up all the time and time will only tell which one will reign supreme (of course, if something like that even happens).
What’s In A Name?
Apart from just adding new features to a language, there’s a good chance you’ll be modularising your application by using ES6 native modules orCommonJS (mostly for Node.js development) or RequireJS (async module loading mostly for websites).
There is a boatload of tools that weren’t mentioned. It is left to the reader to explore them and a good starting place is the awesome list of front-end development.
Command Line Interface (CLI) Applications
Gulp running a gulpfile
Many developers rely mostly on the CLI in their day-to-day development — be it code linting, task running or starting a server, there’s a certain beauty in the efficiency of executing a task purely from the command line.
It would be really bad if you’d have to write every functionality of every app from scratch. That’s where npm steps in. npm is a package manager forNode.js modules and using packages is really simple — install and require them.
The CLI application that you write can also be packaged as a Node.js module and distributed via npm. That is the preferred way of getting your CLI application (or Node.js modules for that matter) to other people.
Many popular libraries and tools have CLI applications for easier use likeGulp or Grunt. There’s also a list of awesome Node.js CLI apps.
Build tools (and task runners) get a special mention because they’re the most basic tools you’ll be using no matter what type of application you’re building.
- compile your SCSS to CSS
- minify and concatenate the resulting files
- copy everything to a distribution folder
Desktop (GUI) Applications
Applications are mostly moving to the web or onto mobile devices. Still, desktop applications offer an immersion mostly unavailable to web applications.
Having a good project structure allows you a lot of code reuse between your web and desktop application. That in turn leads to easier maintenance.
There are two popular projects which allow you to write a desktop application via HTML/JS:
- NW.js — formerly known as node-webkit, it’s the most popular way of writing native desktop applications
- Electron — a newer contender made by GitHub which already gained big traction in the same space
Both of the mentioned projects are used in quite a few popular desktop applications.
Notable applications done with NW.js or Electron include Slack, Game Dev Tycoon, GitHub Atom, WhatsApp Desktop, Facebook Messenger Desktop, Popcorn Time and Microsoft Visual Studio Code. There’s an extensive list of projects made with NW.js and an extensive list of projects made withElectron (both containing links to Repositories for learning or contributing purposes).
Facebook Mobile applications made with React Native
Ionic and Phonegap use a browser wrapper around your HTML/JS and provide access to otherwise unavailable features of the platform (camera, various sensors, etc.). Ionic is leveraging the power of Angular to provide a well-tested and stable platform.
Facebook’s React Native has an interesting approach in which they render your written application to higher-level platform-specific components to achieve a truly native look of the app. This means that you’ll have to write a separate view layer for each platform but you’ll do it in a consistent manner.In the words of Tom Occhino, a software engineer at Facebook, they’re trying the approach of “learn once, write anywhere” which is completely in the spirit of such a diverse ecosystem as this one.
While React Native doesn’t support Android just yet, it’s great that Facebook is using it in their own apps already (Facebook Groups and Facebook Ads Manager). Android support should arrive in less than two months.
Mobile applications written in Ionic or Phonegap include popular applications such as Sworkit, Mallzee, Chefsteps, Snowbuddy and Rormix. There are extensive lists of applications built with Ionic and applications built with Phonegap.
The main advantage of Node.js is it’s event-driven, non-blocking I/O model. That said — Node.js is great at handling data-intensive real-time applications with many concurrent requests. Node.js does it by handling all these concurrent requests on a single thread and thereby greatly reducing needed system resources and allowing for great scalability.
A typical example for these benefits are chat applications. They require uninterrupted connections from clients to a chat room (real-time, non-blocking) and notifications of new messages (event-driven) where you’re supposed to support large numbers of clients and rooms (data-intensive).
The most popular modules associated with back-end development are:
- express — simple web framework for Node.js
- socket.io — module for building real-time web applications
- forever — module for ensuring that a given Node.js script runs continously
How These Modules Fit Together
First of all, you need a web server which can process typical HTTP request on various routes like http://localhost:3000/about. That’s where express comes in.
To have an uninterrupted connection with the server, socket.io is used with a server-side and client-side component of establishing connections.
Since express runs on one thread, we must ensure that an exception doesn’t stop the process (and server altogether). For that purposes, we use forever.
To learn more about these modules, visit their respective websites which feature many tutorials (socket.io even has you building a chat server and client as a hello world application).
Any Combination of the Above
It’s easy to imagine how all these aspects come together.
The possibilities are endless and we’re probably just scratching the surface. This ecosystem is exploding with new techniques, frameworks, modules and even language specs being defined all the time. It’s really exciting.
Where Should I Start?
After that, just follow the path that seems the most interesting. Chances are, you’ll fall deeper down the rabbit hole, discover new things and enjoy the experience even more.
Published at DZone with permission of Kristian Poslek . See the original article here.
Opinions expressed by DZone contributors are their own.