top of page

Architecture & Workflow of Modern Web Apps

In the IT industry the biggest problem we regularly face is the abundance of choice. We have tons of frameworks, languages, tools, platforms, etc. Although for competition purposes; multiple choices are ultimately very good but we usually find ourselves in paralysis when we have to choose among them for our next project.

People usually still consider that (frontend) of web applications are created by mixing together HTML, CSS & JavaScript without giving any thoughts about the frontend architecture, workflow and testing; but things have definitely changed now since last couple of years and in this presentation I try to explain that how JavaScript and it’s related stuff has become first class citizen and how the new workflow looks like. And I will also explain that how the architecture of modern web applications is migrating from thick server-side applications to smart clients and services on their journey North to pure Microservices.

Here is the list of different tools and frameworks that have been discussed in this presentation:

  • Yeoman: Yeoman is the web’s scaffolding tool for modern webapps. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

  • Bower: Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

  • Grunt: Grunt is a task-based command line build tool for JavaScript projects. When you work on large projects you have couple of things that you do regularly and you would like them to be automated; Grunt is the tool to solve that problem!

  • HTML5 Boilerplate: HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

  • Twitter Bootstrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development.

  • Jasmine: Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

  • Karma: A simple tool that allows you to execute JavaScript code in multiple real browsers.

  • PhantomJS: PhantomJS is a headless WebKit scriptable with JavaScript.

  • Protractor: Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

There is enough information about each tool/framework in the presentation to get you started! And then you can go in depth of each them to become a master. This is must have set of tools/frameworks that we use when we build smart web applications for our clients.


bottom of page