Mobile Software Engineering. Mobile MVC Frameworks

Mobile Software

Engineering

Outline

• Introduction

• Pattern • Design pattern • Framework • Mobile framework

• Model-View-Controller (MVC)

• MVC-based mobile frameworks

PART 1:

Pattern

• A way of doing something, or a way of pursuing intent.

• This idea applies to cooking, making fireworks, developing software, and to any other craft.

• It is a solution to a problem in a context. • Patterns are classified into

1. Design Pattern

2. Architectural Pattern 3. Macro – Architecture 4. Micro – Architecture

5. Idioms or Coding Patterns 6. Language Paradigms

Design Pattern

• A category of patterns that deals with object oriented software.

• Represent solutions to problems that arise when developing software within a particular context.

• Capture the static & dynamic structure and

collaboration among key participants in software designs

framework

• Made up of group of concrete classes which can be directly implemented on an existing platform.

• Written in programming languages.

• A large entity comprising of several design patterns.

• Concerned with specific application domain

Design Pattern vs. Framework

• A design pattern is a type of pattern and is more like a concept. • A framework is something already coded to be used repetitively.

PART 2:

Model-view-Controller

Represents the model in a suitable format to interact and usually called "User Interface" (GUI Java, HTML,

XML).

PART 3:

.NET Framework

Architecture

ASP.NET MVC

ASP.NET == ASP.NET Web Forms

ASP.NET Web Forms + MVC Pattern = ASP.NET MVC

ASP.NET MVC

• Microsoft ASP.NET Frameworks

 ASP.NET Web Forms  ASP.NET MVC

• ASP.NET MVC is a revolutionary way to develop web applications

 Built on Model-View-Controller pattern  Separation of concerns

 Invented in 1978 by Trygve Reenskaug

ASP.NET Web Forms

• Original design from late 90s.

• Strongly typed compiled code replaced script.

• Abstract away the web.

Design Goal

• Does not replace Web Forms but provides an alternative framework • Still runs on ASP.NET

 Caching, modules, master pages, providers, handlers, session state

• Embrace the web

 Clean URLs and clean HTML

• Extensible and pluggable framework

 Pluggable view engines

• Testable

jQuery Mobile

• A touch-optimized web framework.

• Developed by the jQuery project team.

• Focused on compatibility with a wide variety of smartphones and tablets.

jQuery Mobile

• A unified UI system that works seamlessly across popular mobile device platforms.

• Built on HTML5, CSS3, jQuery and jQuery UI.

• A wide variety of mobile platforms are targeted, so that no browser or device is left behind.

• All jQuery pages are built using a clean, semantic HTML to ensure compatibility with a wide range of platforms.

Features

• Lightweight and minimal dependency on images • Progressive enhancement

• Responsive Design

• Powerful AJAX-navigation system • Touch and mouse event support • Powerful theming framework • Easily customizable

• Built on Jquery core

• Compatible on various device platforms and mobile web browsers

• HTML5 markup-driven configuration for fast development and minimal required scripting

Advantages

• Save development time to a great extent. • Accelerate the development

• Take care of device, OS and browser fragmentation to a great level.

• Include media queries that support a wide range of device form-factors

• Pretty light-weight.

• A large user base and community for all the help that you need during development.

Disadvantages

• Certain level of design constraints • Customization overload

Requirements For

Development

• Your favorite IDE for HTML

• Visual Studio, Eclipse, TextMate, etc.

• A web browser capable of inspecting HTML elements / JavaScript debugging

• Google Chrome, Safari, IE9, etc.

• Device or emulator for testing your application

• Mac (iOS Simulator), iPhone, iTouch, iPad if targeting iOS devices • Android device or Android Emulator

jQuery Mobile Data

Handling

Note: You will likely want to use Backbone.js to enhance native data handling

PhoneGap

• PhoneGap (Apache Cordova) is a platform for building natively installed mobile applications using HTML, CSS and JavaScript

History

• Apache Cordova was originally called Phonegap build by Nitobi.

• Open-source & free software from the beginning (MIT License), Apache License now.

• Nitobi then acquired by Adobe and donated the PhoneGap codebase to the Apache Software Foundation (ASF).

• PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova. Think of Apache Cordova as the engine that powers PhoneGap.

Sencha Touch

• Browser-based mobile application development framework. • Uses similar development paradigms to Ext JS 4.

• JavaScript MVC class-based approach to development. • Open source.

• Supported by Sencha (VC-backed).

• Compatible with most mobile browsers (Chrome, Safari, iOS Browser,

Android Browser, Kindle, current-gen Blackberry, Windows Mobile/Surface. • Excellent developer tools and resources.

• Compile to native app with either PhoneGap or Sencha CMD. • Native API support for some device APIs.

Advantages

• Full-featured WYSIWYG IDE available

• Use same IDE, concepts and similar syntax for Touch & Desktop development

• Best performing mobile web framework

• MVC framework well-suited to large development projects, working in teams

Disadvantages

• Syntax and MVC framework can be challenging to master for non-professionals (somewhat mitigated by Sencha Architect)

• Performance not as good as native app (but improving)

• No visual theme builder, upgrading from older versions typically involves some level of effort.

Sencha Touch Data

Handling

Dev Tools from Xamarin

OS: • Windows • Mac OS X IDE: • Xamarin Studio Language: • C# Mobile Targets: • iOS • Android • Windows

Other Mobile Frameworks

• Ionic • Appcelerator Titanium • Xpages • Intel XDK • Codename One • Framework7 • CodeIgniter • React Native • PHAP • Webiny Framework • Nova Framework • Mobile Angular UI • Kendo UI

Bibliography

1. Model View Controller (MVC). http://www.slideshare.net/ javierhumaran/model-view-controller-mvc-27875933

2. Introduction to ASP.NET MVC. http://www.slideshare.net/ srivastavamayank/introduction-to-aspnet-mvc-5785945

3. Intro to Xamarin: Cross-Platform Mobile App Development.

http://www.slideshare.net/shahedC3000/intro-to-xamarin-63161570

4. Introduction to Apache Cordova. http://www.slideshare.net/ ejlp12/intro-to-apache-cordova

5. Mobile Development Shootout with jQuery Mobile, Sencha Touch, and Appcelerator Titanium. http://www.slideshare.net/stevedrucker/mobile-platforms-19979061