Mobile Software Engineering

Mobile MVC Frameworks Outline

• Introduction • Pattern • Design pattern • Framework • Mobile framework

• Model-View-Controller (MVC) • MVC-based mobile frameworks PART 1: INTRODUCTION 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 • Can be used across different domains. Examples of Design Pattern 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 e.g. database, web application etc. 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. Mobile Framework PART 2: Model-view- Controller

Represents the model in a suitable format to interact and access the data, usually called "User Interface" (GUI , HTML, XML).

Video Samples PART 3: Mvc-based mobile framework

.NET Framework Architecture .NET History

ASP.NET MVC ASP.NET MVC

ASP.NET == ASP.NET Web Forms

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

ASP.NET + 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  Very popular frameworks ASP.NET Web Forms

• Original design from late 90s. • Strongly typed compiled code replaced script. • Abstract away the web. • Click events replaced “POST” operations. 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  Maintains a strict separation of concern jQuery Mobile

• A touch-optimized . • Developed by the jQuery project team. • Focused on compatibility with a wide variety of and tablets. • Current version is jQuery Mobile 1.4.5 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. • Accessibility features like the WAI-ARIA are tightly integrated. 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, , 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 Views jQuery Mobile Data Handling

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

PhoneGap

• PhoneGap () 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 & 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. Architechture

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, /Surface. • Excellent developer tools and resources. • Compile to native app with either PhoneGap or Sencha CMD. • Native API support for some device . • Several code generation tools available. 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 • Documentation, Examples, Fig Leaf's Getting Started Tutorials 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. Views Sencha Touch Data Handling

Xamarin Native? https://www.xamarin.com/products Dev Tools from Xamarin

OS: • Windows • Mac OS X

IDE: • Xamarin Studio

Language: • C#

Mobile Targets: • iOS • Android • Windows Development Environments

Other Mobile Frameworks

• Ionic • PHAP • Appcelerator Titanium • Webiny Framework • Xpages • Nova Framework • Intel XDK • Mobile UI • Codename One • Kendo UI • Framework7 • CodeIgniter • React Native 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 . 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