Develop an

"enterprise ready"  

Single Page Application 

by Bartolomeo Sorrentino

Who am I

He is a Principal Software Architect with over 25 years of experience. 

 

Cofounder of SoulSofware company. 

 

He is an active contributor to  the open source eco-system. https://github.com/bsorrentino

 

Blog:

http://soulsoftware-bsc.blogspot.it/

Social:

       https://twitter.com/bsorrentinoJ

                https://www.linkedin.com/in/bartolomeosorrentino

           https://plus.google.com/+BartolomeoSorrentino

The "Tools"

Use a  "Package manager"

  • Homebrew for mac user
  • Chocolatery for window user (*)
  • apt,yum,pacman for linux user

(*) We assume that the team has workstation window based

Install "nodejs"

NodeJS is the ingredient technology on which all other tools rely on. NodeJS comes with Node Package Manager (NPM) that is a powerful tool to manage project dependencies

 

 

 

C:\> choco install nodejs

Install "Visual Studio Code"

VSC is the new Open Source IDE provided by Microsoft.

Its official presentation, states:

 

Code Editing. Redefined.

Build and debug modern web and cloud applications. VS Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

C:\> choco install visualstudiocode

Install "GIT"

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

C:\> choco install git

Q: what does mean develop an "Enterprise Ready" Application ?

A: Not Just Develop but ...

  • Modularize
    To divide app in, as much as possible, independent parts that could be developed, tested and  delivered independently (also from remote team)
  • Test
    Each module must be tested in order to guarantee the quality of what we deliver. The most important ones are:
    • Unit, End-2-End, Integration
  • Continuous Improvement
    Use processes and tools (eg GIT) to continue keep application under evolution & control
     
  • Continuous Delivery
    • Versioning, Packaging, Distribution, Maintenance, Documentation

But ... Don't worry

We can do it !!!

The "Web Technologies" that we will use

As "Structural Framework"

AngularJS 1.5    

The version 1.5 includes the concept of  component that will be widely use within our application  

As "UI Kit"

Angular Material is the reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

As "Task Management tool"

Gulp allows to manage the your project's workflow

  • build
  • test
  • run
  • package

As "Development Language"

Javascript Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Typescript can be defined as "transpiler"

It has been created by Microsoft and lately adopted by Google

As "Application Container"
(AKA Browser)

Chrome  Electron

Build cross platform desktop apps with web technologies

Now ... Let's Code !

Go to GITHUB

take a look

Angulajs-ts-feed

C:\> git clone https://github.com/soulsoftware/angularjs-ts-seed.git

Develop a SPA

By Bartolomeo Sorrentino

Develop a SPA

  • 872