Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Software engineer.

Project rescue specialist.

Principal Consultant at Readify.

Andrew Harcourt

Mobile App DevelopmentThe Professional Way

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

What’s this talk about?

• The status quo

• Principles

• Application structure

• Development tooling

• JavaScript testing tools

• Configuration management

• Continuous delivery pipeline

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

What’s this talk not about?

• It’s not a deep dive into any one technology.

• It’s advice on how to hook all these technologies together.

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

The status quo

Moe: We need to ship to production.

Larry: We build the release .ipa file on Johnno’s machine.

Moe: Okay.. where‘s Johnno?

Larry: He’s on leave.

Moe: You knucklehead!

Curly: Nyuk Nyuk Nyuk!

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

The status quo

“Please, dear $deity, don’t let me forget to change this connection string back.”

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Principles

• “git push” creates all of our release artefacts.

• Only development settings are committed to source control.

• The JavaScript you write is not the JavaScript that runs.

• We never, ever release from development workstations. Ever.

• The F5 experience should be simple and pleasant.

• Instrumentation is critical. Do this early.

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Application structure

… is not the topic of this talk. Structure your apps however works for you.

(Code walk-through)

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Development tooling

• Visual Studio/WebStorm/Notepad/vim/pico

• Node

• Gulp

(Walk-through: code change to live in browser.)

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

JavaScript testing tools

• Test frameworks• Jasmine• Mocha• Qunit

• Test runners• Chutzpah• Karma• R#

• UI automation• Protractor

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

JavaScript configuration management

• config.js

• config.Transforms.js

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Build pipeline

• Let’s do this!

• “git push” -> GitHub -> TeamCity -> Octopus -> AppBuilder -> .ipa

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Instrumentation

• Serilog

• Seq

• AngularJS decorator for $log

• Raygun

• New Relic

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

Google it with Bing: Homework

• John Papa

• TypeScript versus ECMAScript

• Angular seed (angular-seed)

• Mocha versus Jasmine

• Gulp versus Grunt

• AppBuilder versus PhoneGap

Andrew Harcourt

@uglybugger

www.uglybugger.org@bnedotnet

It can be home tiem now plz?Thanks, everyone.