Level Up Development

Looking to join the ranks of full-stack developers, but not sure where to start?

Look no further. We at Level Up Development have compiled a handy roadmap highlighting the precise skills every modern full-stack developer should have. This guide will tell you exactly what you need to know to get ready, set, go in your career. Our 2016 edition gives a warm welcome to Apache Cordova and ReactJS to facilitate mobile application development. This will ensure your web fu remains portable to any form factor.

Let’s get started.

An Overview: Three Major Frameworks

Three major frameworks dominate open-source, full-stack web development. Which one to use is largely up to you (or your clients). We’ll be focusing on those three major frameworks and their support for full-stack development. They are:

NodeJS (Cross-platform) Site and Tutorials
ASP.NET MVC (Windows, some Cross-Platform with vNext) Site and Tutorials
Ruby on Rails (Cross-Platform, mostly Linux) Site and Tutorials

Go Mobile or Go Home

Nowadays, every major product or web service has an accompanying mobile application. Mobile application expertise is a must-have for any serious software development team.

In addition to the three major frameworks above, we’ll also cover the most important skills and technologies for web-based mobile application developers. These frameworks let you to seamlessly take your pre-existing web skills to mobile devices, allowing you to build everything from consumer apps to enterprise business applications:

Apache Cordova (cross-platform, web-based mobile apps) Site and Tutorials
ReactJS (For building reusable SPA components) Site and Tutorials
Alt (FLUX alternative, data and API integration) Site and Tutorials
Bootstrap (Responsive web design framework) Site and Tutorials

Apache Cordova lets you package web-based content (HTML, CSS and JavaScript) and deploy that content to mobile devices. It supports both iPhone and Android devices, as well as plugins to allow your applications to interact with native features of each device, such as file transfer, camera, photos, and geolocation.

ReactJS is a technology from FaceBook that lets developers better handle the complexities of single-page applications (SPAs). Most new web applications are SPAs. Previously, technologies such as BackboneJS, KnockoutJS, and AngularJS were popular. ReactJS lets data drive the desktop and mobile UI in a sane way. Everything in ReactJS is also a reusable component, saving time and money across single or multiple projects.

FLUX is used with ReactJS to structure how data flows. Alt is our recommended implementation of FLUX. Managing data and interactions from various sources, including users, RESTful APIs and changes from within the application itself should be done consistently and work the same regardless of whether there’s three or three dozen components in an app. Alt helps you achieve that.

Bootstrap is a responsive UI framework that makes it easy to quickly build user interfaces, for both the desktop and mobile web. A household name by now, knowledge of Bootstrap is a must-have to modern web user interface design.

What is the “full-stack” made of?

We’ll talk more about client-side tools below. For now, let’s have an overview of what technologies make up the “full stack”:

Self-hosted web server. Web Server if not self-hosted. For example, Internet Information Services (IIS) on Windows-based deployments, and “proxy servers” like nginx for large-scale web deployments such as AWS.
Client-side build tools. An essential these days for supporting the latest HTML, CSS and JavaScript features and working across platforms.
Mobile deployments for cross-platform and multi-device applications.
Building client-side UIs. Forms, token-based security, scaffolding for CRUD (Create, Read, Update, Delete) operations.
Encourages SPA integration (AngularJS, ReactJS, FLUX, RESTful APIs)
Encourages Responsive Web Design (typically via Bootstrap integration)
MV-whatever. These days, both the client and server-side have the equivalents of a model (state), controllers (actions) and views baked in as the default architecture. MVC is the standard for the server-side code, MV* for Angular, while the more functional FLUX is popular with ReactJS.
(Optional) Web Sockets / Protocol Upgrades for server push capabilities
Baked-in Security, Routing and Authentication. Token-based authentication a must-have for single-sign on and mobile device support.
RESTful JSON APIs
Database integration
ORMs for easier, self-optimizing CRUD operations
Cloud hosting / Deployment and scaling
An IDE

We’ll now cover how each of the three major frameworks listed above support the full-stack through their ecosystem of technologies.

Full Stack Overview: ASP.NET MVC / Web API

Self-hosting: OWIN / Katana HttpListener for Windows, or Kestrel (.NET server) on Mac OS X.
Other Servers: IIS, IIS Express, Kestrel (Mac OS X)
Dynamic page generation: Razor syntax and C# Built-in security, routing, authentication (Windows integrated security, custom Individual Identity, and External / Third Party)
Templates support SPA frameworks (Knockout, Angular). Also, see SideWaffle.
Templates support Responsive Web Design (Bootstrap)
Scaffolding for CRUD operations to DB assisted by Visual Studio
RESTful JSON APIs: Web API
Easily manipulate sets of data using language-integrated queries (LINQ), Microsoft-specific
ORM: Default Entity Framework. Handles data modeling, lazy loading, CRUD operations by default. LINQ-to-Entities optimizes for most efficient SQL query it knows how to generate.
DB Support: Built-in drivers for MongoDB and SQL Server
Cloud hosting and deployment: Azure
Package Management and Resolution: NuGet
Real-time web applications / WebSockets: SignalR
Visual Studio as the IDE
Tool installation and management: Microsoft Web Platform Installer
Limited, but growing support for the modern build client-side ecosystem (ES6, gulp, babble, React, etc.)

Full Stack Overview: NodeJS

Server-side JavaScript has gained a lot of ground due to its high performance and familiarity to desktop web developers. While the popular “MEAN” stack covers a lot of ground, there’s more to NodeJS development than that. In addition, we recommend React + FLUX over using AngularJS.

Database: MongoDB
Routing / REST: ExpressJS
SPA framework: ReactJS / FLUX
Web Platform / Server: NodeJS
Hosting and Deployment: AWS EC2 or Elastic Beanstalk for auto-scaling
Package management and tool installation: npm
Client-side package management: Bower
Client-side build tasks: Gulp
Node apps are self-hosted by default. Cross-platform due to compilation via Google’s v8 engine.
Everything else: The Node ecosystem will support for everything you need, but you’ll probably need to search packages online to find additional utilities. This is partly due to the nature of open source – you don’t have a single vendor telling you what to use.

Full Stack Overview: Ruby on Rails

Ruby on Rails (RoR) remains popular in coastal startups based on Linux systems. It offers reasonable performance and a convention-based technology-stack similar to ASP.NET MVC.

In Ruby on Rails applications, you’ll almost always be doing something “the Ruby on Rails way”. While this consistency is a huge benefit to many teams and startups who want to get things done quickly, Ruby on Rails is less familiar to many developers than the alternatives. Having to do things the Ruby on Rails way can also be restrictive as applications become more complex.

Rails is full-stack in and of itself.
DB creation, migration, build tasks: Rails + Rake
Application server: Rails
Token-based Security (important for mobile): Devise
RESTful APIs: Rails API controllers
MVC: Ruby on Rails follows a convention-based MVC pattern
DB support: MySQL is most common
Going through a Ruby on Rails Guide will get you covering a lot of ground.
Common Proxy Web-Servers: nginx, Apache through mod_rails module
More on hosting and deployment here.
ORM / CRUD operations: ActiveRecord pattern.
Package management: Ruby gems using bundler
Scaffolding: Rails generation
Views: Rails embedded ruby files (ERBs), SASS and CoffeeScript
Responsive Web Design: Bootstrap is common

That covers our desktop platforms. Now, let’s move onto our mobile technologies.

Apache Cordova

It is easier than ever to extend the power of your web-based technologies to mobile devices. Apache Cordova lets you configure and deploy web-based applications to phones, tablets and more. It accomplishes this by building a scaffold application containing a mobile web view. Your web application then runs within that web view, making porting web applications to mobile devices seamless. Each platform (Android and iOS) will support various plugins for extending functionality and making use of the native features of each device.

One should be aware of the following checklist when building web-based mobile apps:

Security: You’ll need token-based security such as JWT. This ensures that regardless of how mobile requests are routed (through a web view on a separate port on the device, for example), users can authenticate using bearer tokens.
Styling: Styling of web-based mobile apps should resemble native apps. For that, we use and contribute to the Reapp project.
Extended functionality: Multipart file uploads in XML Http requests, native camera support, etc. will utilize native Cordova device plugins for each platform.
Development and Deployment: You’ll need developer accounts, subscriptions and certificates for each mobile platform you want to publish apps to.
In particular, you’re going to need a Mac with XCode installed for iOS development.
Build process: Your app will ship as a collection of XCode and web-based (HTML, CSS, JS) files. You will need a client-side build process (see below) to compile your web-based changes into a folder that gets shipped to the mobile device.

Client-side Ecosystem (Boostrap, ReactJS + Flux and Others)

The modern web now views the browser vendors and user build tools, rather than some standards committee, as the driver of the web moving forward. With this comes the need to support modern tooling in your client-side development process and ecosystem.

The checklist below will help get you started:

Build tools and libraries: npm
Client-side build tools and libraries: Bower
Convert modern ES6 to cross-browser JavaScript: Babel
Create tasks to watch for file changes and automatically build: Gulp
Modern, fairly fast text editors with large plugin support: Atom.io and Sublime Text
Modern responsive and portable web design: Bootstrap
Portable font-based icons: Font Awesome
Functional, reactive single page applications (SPAs): ReactJS + FLUX via Alt
Reference for Google’s Material Design specs: Material UI

React-based components for iOS: ReApp.io
Some packages will only be available via: yum

Now, if you’re anything like me, the list above seems scary. The sparse nature of tool advancement and availability is a consequence of the open source web. Here’s a more descriptive breakdown:

npm, bower and yum are all package managers. npm is going to be your main partner, but some packages are built specifically for bower or yum, which have their own repositories.

npm is going to be used both for installing global packages using the -g option on the command-line, and local packages for each project you work on. Perhaps more confusingly, what you install using npm could also be a command-line utility itself if it’s installed for the given context (project-based on global). Your packages will be stored in their respective node_modules folder.

Bower specializes in client-side utilities and a lot of client-side developers have gravitated toward it. This should make sense, since npm is node-specific and not everything is built using or dependent on Node.

yum is sometimes all you have available, depending on how you deploy your applications. yum is the odd one out of the group, in that each Unix-type distribution manages its own list of yum packages available. Depending on where you deploy your code to, yum might be your own choice, but depending on how frequently they’re maintained, yum packages can be fairly out-of-date.

Gulp is going to do the work of running your Babel process, for example, so that every time you save your React JSX, ES6, HAML, SASS or CoffeeScript files, you’ll get cross-browser or mobile HTML, CSS and JavaScript as a result. You’ll also get mapping files, which means you can debug React JSX files in a browser like Google Chrome and still hit all of your JavaScript breakpoints. The end result? Seamlessly using the languages and features you love without having to worry as much about cross-browser or device compatibilities.

Which should I choose?

All of the frameworks listed are mature and feature robust enough to get the job done. Your choice of framework is often dictated by what the project is already written in, but if you are just starting out its largely personal preference. Obviously, each framework has its advantages and disadvantages compared to others. As you become experienced as a developer, these trade-offs become more apparent.

Check back for the next article on advantages and disadvantages of the different frameworks.

Full-Stack Development Roadmap for Modern, Mobile Web Developers