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 Java, 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 web development 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 web framework. • Developed by the jQuery project team. • Focused on compatibility with a wide variety of smartphones 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, 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 Views jQuery Mobile Data Handling Note: You will likely want to use Backbone.js to enhance native data handling Dynamically Populating UI 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. 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, 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. • 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. Sencha Touch 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 Angular 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 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.