<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Lessons Learnt implementing a Worklight-based eCommerce mobile solution</title>

		<meta name="description" content="A presentation made for the WebSphere User Group talks in March 2014">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->

		<link rel="stylesheet" href="css/sean.css">
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> -->

		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h2>Lessons Learnt implementing a Worklight-based eCommerce mobile solution</h2>
					<p>
						<small><a href="http://seanbedford.com"><NAME></a> / <a href="http://twitter.com/bedfordsean">@bedfordsean</a> / <a href="mailto:<EMAIL>"><EMAIL></a></small>
					</p>
				</section>
				<section>
					<h2>What is Worklight? - Server side</h2>
			        <!-- Worklight diagram, how it fits in with WAS (ND or Liberty) -->
					<img src="images/WLOverview.svg" style="height:600px"/>
					<aside class="notes">
						<ul>
							<li>Sits inside a WAS/J2EE container</li>
							<li>Connects to a variety of back end services</li>
							<li>Geared up specifically to serve mobile devices</li>
							<li>Contains more "plumbing" than just Cordova, although it does include Cordova</li>
						</ul>
					</aside>
			    </section>

			    <section>
			    	<h2>What is Worklight? - Client side</h2>
			        <!-- Worklight diagram, how it fits in with WAS (ND or Liberty) -->
					<img src="images/WLClientOverview.svg" style="height:600px"/>
			    </section>


				<section>
					<h2>The Bigger Picture</h2>
					<!-- Continuation, possibly Jon Marshall's "product slide"; cover back end connectivity and security model features? -->
					<img src="images/WLProductOverview.jpg"/>

					<aside class="notes">
						<ul>
							<li>Easy to do authentication</li>
							<li>Mashups easy in WL adapters</li>
							<li>Direct "Hybrid" updates to devices possible</li>
							<li>Mobile specific analytics "for free"</li>
						</ul>
					</aside>
				</section>

				<section>
					<section>
						<h2>Why is it good?</h2>
						<ul>
							<li>Out-of-box support for app analytics (Device, OS, code version)</li>
							<li>Direct update provides a powerful way to quickly patch issues</li>
							<li>App versioning scheme allows operational management of multiple deployed versions</li>
							<li>Security model provides easy control of back end resources</li>
							<li>Not "just Cordova (PhoneGap)" - native APIs for iOS, Android, and devices running JavaME</li>
						</ul>
					</section>
					<section>
						<h2>Cordova Primer</h2>
						<ul>
							<li>API layer between web container and native functionality</li>
							<li>You can write a new Cordova plugin with native implementations on each platform you want to support</li>
							<li>This plugin can then be wrapped in to JavaScript to allow for calling from a web container</li>
						</ul>
					</section>
				</section>

				<section>
					<h2>Client side code</h2>
					<h4>MVC approach</h4>
					<p>
						<ul>
							<li>How do you store data?</li>
							<li>How do you display data?</li>
							<li>How do you handle the business rules?</li>
						</ul>
					</p>
					<p class="fragment fade-in">
						Pick a framework that supports MVC. It will make your life MUCH easier :-)
					</p>

					<aside class="notes">
						<ul>
							<li>MVC approach</li>
							<li>Best to pick a framework that supports this flow</li>
							<li>Stateful views that automatically update based on data = good</li>
							<li>E.g. jQuery Mobile, AngularJS, Ionic, Dojo, etc</li>
						</ul>
					</aside>
				</section>					
				<section>					
					<h2>Think of the user</h2>
					<ul>
						<li>Think about how the user is going to interact with your app</li>
						<li>Consider control and text sizes. Apple recommends >= 44px * 44px tappable area</li>
						<li>Design, prototype, and test with actual end-users</li>
						<li>Don't be afraid to scrap a design and start again</li>
					</ul>
					<aside class="notes">
						<ul>
							<li>Prototyping VERY important in early project stages</li>
							<li>Demo early and often to the business stakeholders. UI+UX is very subjective</li>
							<li>Read Apple Human Interface Guidelines (https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html)</li>
						</ul>
					</aside>
				</section>
				<section>
					<h2>Common UI Patterns</h2>
					<!-- Common design patterns (lists, tables, modals), customer flows, etc -->
					<img src="images/CommonUI.png" style="border:none; background:none; box-shadow:none; max-width: 120%; margin-left: -100px"/>
					<aside class="notes">
						<ul>
							<li>Think about common mobile patterns. Ok to have something custom, but remember that these platforms have established paradigms already!</li>
							<li>Chevrons to indicate a view to transition to, coloured links that can be tapped, tabble area size, informational prompts</li>
							<li>Lists, Modals, tables, all common</li>
							<li>Best to also pick a framework that allows you to do all of these, or most of them, to save on custom work</li>
						</ul>
					</aside>
				</section>

				<section>
					<h2>Server side code</h2>
					<!-- Cover single entry/exit point function in client and adapter for each back end -->
					<h4>Consistent endpoint management</h4>
					<ul>
						<li>Common problem: How to handle errors, timeouts, bad responses consistently?</li>
						<li class="fragment fade-in"><p>Solution: Provide a consistent client- and server-side endpoint</p><img src="images/WrapperMethod.svg" height="400px" style="border:none;background:none;box-shadow:none"/></li>
					</ul>

					<aside class="notes">
						Allows for control point to intercept (amongst other things)

						<ul>
							<li>User session timeout</li>
							<li>Back end server error (404, 500)</li>
							<li>Back end server returning something other than JSON</li>
							<li>Back end server redirect</li>
							<li>User error/info messaging</li>
						</ul>
					</aside>
				</section>

				<section>
					<h2>Performance, Security, Scalability Considerations</h2>
					<ul>
						<li>Think about end-end versioning - does your back end support multiple live versions?</li>
						<li>Think about security - validation in the front end only is never enough</li>
						<li>Think about how the application will load and service frequent requests (startup, browse, login...)</li>
					</ul>
				</section>
				<section>
					<!-- Cover the basics of back-end cookie based authentication -->				
					<h2>Basic Worklight user authentication</h2>	
					<ul>
						<li>A key feature of Worklight is it's security model</li>
						<li>This allows the securing of a back end call with a single line of code (once it is set up)</li>
					</ul>
				</section>
				<section>
					<h2>Example</h2>
					<ul>
						<li>In your adapter's XML file, add a security test to a function</li>
					</ul>
					<pre><code data-trim style="width:110%">
<procedure name="myUnsecuredProcedure"></procedure>
<procedure name="mySecuredProcedure" securityTest="MySecurityTest"></procedure>
					</code></pre>

					<ul>
							<li>This will trigger a security test for a realm you've defined in authenticationConfig.xml</li>
					</ul>
					<pre><code data-trim style="width:110%">
<customSecurityTest name="MySecurityTest">
<test isInternalUserID="true" realm="MySecureRealm" step="1" />
</customSecurityTest>
					</code></pre>
					<ul>
						<li>This in turn will issue a challenge for "MySecureRealm" if there is no user logged in for that realm</li>
						<li>At this point, your client code can handle the challenge, by providing authentication details, tokens, or similar</li>
					</ul>
					<aside class="notes">
						<ul>
							<li>Client req > WL Server security check > Issue Challenge > Provide auth details > WL Server verify > Re-issue orig request</li>
							<li>Will issue challenge on first request to secured procedure</li>
							<li>Request can then be made again after auth</li>
							<li>WL server can store details of the user session, or you can handle this yourself</li>
						</ul>
					</aside>
				</section>

				<section>
					<h1>Questions?</h1>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>
<commit_msg>Added go live considerations<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Lessons Learnt implementing a Worklight-based eCommerce mobile solution</title>

		<meta name="description" content="A presentation made for the WebSphere User Group talks in March 2014">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->

		<link rel="stylesheet" href="css/sean.css">
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> -->

		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h2>Lessons Learnt implementing a Worklight-based eCommerce mobile solution</h2>
					<p>
						<small><a href="http://seanbedford.com"><NAME></a> / <a href="http://twitter.com/bedfordsean">@bedfordsean</a> / <a href="mailto:<EMAIL>"><EMAIL></a></small>
					</p>
				</section>
				<section>
					<h2>What is Worklight? - Server side</h2>
					<img src="images/WLOverview.svg" style="height:600px"/>
					<aside class="notes">
						<ul>
							<li>Sits inside a WAS/J2EE container</li>
							<li>Connects to a variety of back end services</li>
							<li>Geared up specifically to serve mobile devices</li>
							<li>Contains more "plumbing" than just Cordova, although it does include Cordova</li>
						</ul>
					</aside>
			    </section>

			    <section>
			    	<h2>What is Worklight? - Client side</h2>
					<img src="images/WLClientOverview.svg" style="height:600px"/>
			    </section>


				<section>
					<h2>The Bigger Picture</h2>
					<img src="images/WLProductOverview.jpg"/>

					<aside class="notes">
						<ul>
							<li>Easy to do authentication</li>
							<li>Mashups easy in WL adapters</li>
							<li>Direct "Hybrid" updates to devices possible</li>
							<li>Mobile specific analytics "for free"</li>
						</ul>
					</aside>
				</section>

				<section>
					<section>
						<h2>Why is it good?</h2>
						<ul>
							<li>Out-of-box support for app analytics (Device, OS, code version)</li>
							<li>Direct update provides a powerful way to quickly patch issues</li>
							<li>App versioning scheme allows operational management of multiple deployed versions</li>
							<li>Security model provides easy control of back end resources</li>
							<li>Not "just Cordova (PhoneGap)" - native APIs for iOS, Android, and devices running JavaME</li>
						</ul>
					</section>
					<section>
						<h2>Cordova Primer</h2>
						<ul>
							<li>API layer between web container and native functionality</li>
							<li>You can write a new Cordova plugin with native implementations on each platform you want to support</li>
							<li>This plugin can then be wrapped in to JavaScript to allow for calling from a web container</li>
						</ul>
					</section>
				</section>

				<section>
					<h2>Client side code</h2>
					<h4>MVC approach</h4>
					<p>
						<ul>
							<li>How do you store data?</li>
							<li>How do you display data?</li>
							<li>How do you handle the business rules?</li>
						</ul>
					</p>
					<p class="fragment fade-in">
						Pick a framework that supports MVC. It will make your life MUCH easier :-)
					</p>

					<aside class="notes">
						<ul>
							<li>MVC approach</li>
							<li>Best to pick a framework that supports this flow</li>
							<li>Stateful views that automatically update based on data = good</li>
							<li>E.g. jQuery Mobile, AngularJS, Ionic, Dojo, etc</li>
						</ul>
					</aside>
				</section>					
				<section>					
					<h2>Think of the user</h2>
					<ul>
						<li>Think about how the user is going to interact with your app</li>
						<li>Consider controls, text sizes, readability. Apple recommends >= 44px * 44px tappable area and 17pt+ font size</li>
						<li>Design, prototype, and test with actual end-users</li>
						<li>Don't be afraid to scrap a design and start again</li>
					</ul>
					<aside class="notes">
						<ul>
							<li>Prototyping VERY important in early project stages</li>
							<li>Demo early and often to the business stakeholders. UI+UX is very subjective</li>
							<li>Read Apple Human Interface Guidelines (https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html)</li>
						</ul>
					</aside>
				</section>
				<section>
					<h2>Common UI Patterns</h2>
					<!-- Common design patterns (lists, tables, modals), customer flows, etc -->
					<img src="images/CommonUI.png" style="border:none; background:none; box-shadow:none; max-width: 120%; margin-left: -100px"/>
					<aside class="notes">
						<ul>
							<li>Think about common mobile patterns. Ok to have something custom, but remember that these platforms have established paradigms already!</li>
							<li>Chevrons to indicate a view to transition to, coloured links that can be tapped, tabble area size, informational prompts</li>
							<li>Lists, Modals, tables, all common</li>
							<li>Best to also pick a framework that allows you to do all of these, or most of them, to save on custom work</li>
						</ul>
					</aside>
				</section>

				<section>
					<h2>Server side code</h2>
					<!-- Cover single entry/exit point function in client and adapter for each back end -->
					<h4>Consistent endpoint management</h4>
					<ul>
						<li>Common problem: How to handle errors, timeouts, bad responses consistently?</li>
						<li class="fragment fade-in"><p>Solution: Provide a consistent client- and server-side endpoint</p><img src="images/WrapperMethod.svg" height="400px" style="border:none;background:none;box-shadow:none"/></li>
					</ul>

					<aside class="notes">
						Allows for control point to intercept (amongst other things)

						<ul>
							<li>User session timeout</li>
							<li>Back end server error (404, 500)</li>
							<li>Back end server returning something other than JSON</li>
							<li>Back end server redirect</li>
							<li>User error/info messaging</li>
						</ul>
					</aside>
				</section>

				<section>
					<h2>Go-live Considerations</h2>
					<ul>
						<li>Think about end-end versioning - does your back end support multiple live versions?</li>
						<li>Think about security - validation in the front end only is never enough</li>
						<li>Think about how the application will load and service frequent requests (startup, browse, login...)</li>
						<li>Think about operational management (logging, reporting, information for support)</li>
					</ul>
				</section>
				<section>
					<!-- Cover the basics of back-end cookie based authentication -->				
					<h2>Basic Worklight user authentication</h2>	
					<ul>
						<li>A key feature of Worklight is it's security model</li>
						<li>This allows the securing of a back end call with a single line of code (once it is set up)</li>
					</ul>
				</section>
				<section>
					<h2>Example</h2>
					<ul>
						<li>In your adapter's XML file, add a security test to a function</li>
					</ul>
					<pre><code data-trim style="width:110%">
<procedure name="myUnsecuredProcedure"></procedure>
<procedure name="mySecuredProcedure" securityTest="MySecurityTest"></procedure>
					</code></pre>

					<ul>
							<li>This will trigger a security test for a realm you've defined in authenticationConfig.xml</li>
					</ul>
					<pre><code data-trim style="width:110%">
<customSecurityTest name="MySecurityTest">
<test isInternalUserID="true" realm="MySecureRealm" step="1" />
</customSecurityTest>
					</code></pre>
					<ul>
						<li>This in turn will issue a challenge for "MySecureRealm" if there is no user logged in for that realm</li>
						<li>At this point, your client code can handle the challenge, by providing authentication details, tokens, or similar</li>
					</ul>
					<aside class="notes">
						<ul>
							<li>Client req > WL Server security check > Issue Challenge > Provide auth details > WL Server verify > Re-issue orig request</li>
							<li>Will issue challenge on first request to secured procedure</li>
							<li>Request can then be made again after auth</li>
							<li>WL server can store details of the user session, or you can handle this yourself</li>
						</ul>
					</aside>
				</section>

				<section>
					<h1>Questions?</h1>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>

{'fraction_non_alphanumeric': 0.14169388600082808, 'fraction_numerical': 0.008464829553296223, 'mean_word_length': 3.042023056898475, 'pattern_counts': {'":': 0, '<': 614, '<?xml version=': 0, '>': 626, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3971984', 'n_tokens_mistral': 8708, 'n_tokens_neox': 6591, 'n_words': 2046}