© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Advanced Work"ows for Mobile Web Design and DevelopmentBruce Bowman, @brucebowman, Sr. Product Manager, Edge Tools & ServicesDuane O’Brien, @duaneobrien, Sr. Computer Scientist, Edge Tools & Services

1

Friday, May 3, 13We’re from the Edge Inspect team, and also work on other exciting new projects. If you’re not sure what Edge Tools and Services are, we’ll tell you in a few minutes, but in the meantime you can think of them as Adobe’s next generation of web tools and services built for today’s modern web designers and developers. We’re 100% focused on building great tools for the open web.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Our interpretation of “Advanced” for today

§ Advanced Work!ows for Mobile Web Design and Development

§ Test!

§ Test early and o"en

§ Test on real devices

§ Test collaboratively and in groups

§ Work efficiently by using remote control and automation

§ Testing CAN be fun...

§ Related courses at MAX

§ S8405 Tamagotchi Galore: Wrangling 7,000-Plus Devices - Tuesday 4:00 PM - 504

§ Get hands-on with Edge Inspect§ BL8573 Working Faster and Smarter with Edge Inspect - Tuesday 8:00 AM - 403B

§ L8188 Working with Edge Inspect - Wednesday 1:30 PM - 409A

2

Friday, May 3, 13We’re going to cover lots of tools that will be very helpful for front end designers and developers. We’re going to cover work"ows using Edge Inspect, but many other tools that will help you work more efficiently.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Today’s topics

§ Installing Edge Inspect CC§ Network con!guration§ UI tour § Chrome Extension Options§ Sites with authentication§ URL Monitoring§ HTTPS§ Edge Tools integration

§ Group reviews/testing§ Local development§ Virtual hosts§ Web fonts§ JS Bin§ LiveReload/CodeKit§ Bandwidth $ro%ling§ Your local community

3

Friday, May 3, 13In the beginning we’re going to be talking a lot about Edge Inspect, then we’re going to get into workflows with other front-end tools, and cover typical issues that you might encounter.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Installing Edge Inspect CC

§ Start with the Creative Cloud - h%p://creative.adobe.com

§ Get a free membership

§ Install Edge Inspect CC on your computer

§ Install the Chrome Extension

§ Install on devices

4

Friday, May 3, 13It might seem complex because there are multiple pieces of so&ware to install, but you’ll be pleasantly surprised how easy and quick it is to get everything going. In fact, we’ve worked very hard to try and make this easy and smooth, and we hope you’ll be delighted with the experience.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Network con!guration

§ Corporate networks can be a challenge!

§ Devices and computer must be on the same network

§ Consider a separate wireless access point

§ A good rule of thumb

§ If your device cannot already see your computer, Edge Inspect CC will not work for you

§ Quick test: if you have a local development server...§ Try entering your computer’s IP address in your device to hit the computer’s localhost

5

Friday, May 3, 13We have to tell you about this issue, because it will bite you if you aren’t aware of it. In most cases, you’ll !nd that you can easily work around the issues and do what you need to do to get everything connected. and working.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

UI tour

§ Managing Devices

§ Synchronous Browsing

§ Remote Inspection

§ Screenshots

§ Cache Management

§ Toggle UI

§ Mobile client features

6

Friday, May 3, 13Here, you see an example scenario where there are two devices already connecting and browsing synchronously with our computer. You also see another device in the pairing stage, where you grant access for it to also connect to your computer.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Chrome Extension Options

§ Advanced Se%ings

§ Screenshots directory

§ Custom weinre server

7

Friday, May 3, 13$ere are more advanced options, but nice to know about as they provide some "exibility and if you need these se%ings, you’ll be so happy to know about this.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Custom weinre server

§ Install node.js - h%p://nodejs.org/

§ Install weinre via npm: sudo npm install -g weinre

§ Run weinre: weinre --boundHost -all-

§ Switch the weinre server in the extension

§ Cool, but why?

8

Friday, May 3, 13Installing node.js and weinre takes just a couple of minutes, and even if you’re not familiar with the command line, you can handle this.

If you’re not a command line user, here’s a good tip to know: once you’ve done this one, your commands are remembered in the Terminal window - just use Up and Down arrow to go through them until you see the one you want, and press Return/Enter. (not sure about the Windows command line, but I think it does the same thing). Also, you can use your mouse to selct, then copy and paste the URL that weinre tells you it is using. Super easy.

Even if you’re not using Edge Inspect, weinre might be a useful tool to know about.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Why use a custom weinre server?

§ You are developing and testing on a wireless network that doesn’t have Internet access, so you can’t use the Remote Inspection feature

§ &e pages you’re developing are under NDA or have other IP concerns and cannot be exposed outside of your internal network

§ For some unknown reason one or more of your devices just don’t seem to be able to reliably connect to the default weinre server

§ You need be%er performance than you’re able to get using the default weinre server

§ You want to use a different version of weinre than we provide

9

Friday, May 3, 13$e most common reason people want this is that they have some policies that prevent them from using a weinre server on the internet.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Testing sites with Authentication

§ Using HTTP authentication in URLs - h%ps://myUserID:myPa55wurd@secret.mydomain.com

§ Edge Inspect passes this whole URL to devices

§ Other authentication - manually

10

Friday, May 3, 13

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

URL Monitoring

§ Edge Inspect listens for URL changes

§ Sends the new URL to devices

§ Single Page App state changes

§ Using # anchors

§ Using URL parameters

§ What doesn’t cause devices to change:

§ Scrolling

§ JavaScript interactions

§ Form data entry

§ CSS transitions and animations

§ Other considerations

§ m.dot sites

11

Friday, May 3, 13Ask audience if anyone is still maintaining/creating m.dot sites

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

HTTPS

§ You can use unsigned SSL certi(cates during development

§ Each Edge Inspect device will be asked to accept the certi(cate (once)

12

Friday, May 3, 13

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Edge Tools integration

§ Demos§ Edge Re!ow CC§ Edge Code CC§ Edge Animate CC

§ Other tools§ Preview in (Chrome) browser§ More on other tools coming up...

13

Friday, May 3, 13We’re integrating Edge Inspect tightly into our other Edge tools. $is allows you to preview your work on devices directly, even if you’re not also previewing in the browser. $e integration I can demo today is awesome, but not all features of Edge Inspect are supported yet. We will be continuing to improve this integration, and also integrating Edge Inspect into other tools and work"ows.

We are also pu%ing the !nishing touches on some of our Edge Inspect APIs, and will be releasing those soon under a very liberal Apache 2 license. With the API, someone could write browser extensions for other browsers, or perhaps do a custom Edge Inspect integration into their continuous integration build system.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Group reviews/testing

§ Edge Inspect is useful when you get a group together

§ Connect devices

§ Load a URL

§ Each person interacts with the device

§ Good for

§ Dev team reviews and testing

§ Design reviews

§ Client reviews

§ h%p://blogs.adobe.com/edgeinspect/2013/04/15/how-starwood-hotels-resorts-uses-adobe-edge-inspect/

14

Friday, May 3, 13In this picture, we had over 30 devices connected to one computer, synchronously browsing through Edge Inspect.

Our free version of Edge Inspect allows one concurrent connection, but the full version does not limit the number of devices that can be concurrently connected.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Local development

§ Localhost

§ h%p://localhost or h%p://localhost:8888/

§ h%p://127.0.0.1/

§ h%p://machine.local/ on OSX

§ Local servers

§ XAMP - Apache, MySQL and PHP§ OSX - MAMP/MAMP Pro - h%p://www.mamp.info

§ Win - WampServer - h%p://www.wampserver.com

§ OSX Web Sharing (UI removed in 10.8)

§ Windows Personal Web Server

§ Node, PHP CLI, NGINX, ligh%pd, BOA, Resin, etc, etc...

§ If Your Device Can’t See It, Edge Inspect Can’t Help

15

Friday, May 3, 13If you do any local development, this is super critical for you. We have a solid work"ow for local and virtual host development. We’ve blogged quite a bit about these topics on the Edge Inspect team blog.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Locally Installed WordPress

§ WordPress uses absolute URLs

§ “style.css” becomes “h%p://localhost/blogdirectory/wp-content/themes/sometheme/style.css”

§ Edge Inspect turns “localhost” into “your.machine.ip.address” on URLs it broadcasts

§ “h%p://localhost/index.php” becomes “h%p://10.58.22.63/index.php”

§ index.php: <link href=”h%p://localhost/blogdirectorywp-content/themes/sometheme/style.css” ... >

§ What does the device think “localhost” is?

§ Can (x in Se%ings, but there’s an easier way

§ Root Relative URLs plugin

§ h%p://wordpress.org/extend/plugins/root-relative-urls/

16

Friday, May 3, 13For a local WordPress install, you also need the local development server, and PHP and MySQL, which is why we prefer s simple setup using MAMP or WAMP. $is extra plugin makes it possible to have a great work"ow on your local environment while previewing it all live on devices too.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Virtual hosts

§ Similar to the problem with WordPress, Localhost and your Device

§ Edit Hosts (le on your machine

§ Alias a domain to an IP address, bypassing DNS lookup

§ example: 127.0.0.1 my.awesome.dev.domain.edu

§ Where will the device look for DNS information?

§ Solutions:

§ xip.io - h%p://xip.io/

§ Charles Proxy - h%p://www.charlesproxy.com/

§ Edge Inspect Team Blog - Work!ow post series

§ h%p://blogs.adobe.com/edgeinspect/category/work!ow-enhancements/

17

Friday, May 3, 13xip.io is the answer here - start with it, and read our blogs on the topic.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Web fonts

§ Edge Web Fonts

§ 500+ high quality, free and open source web fonts

§ Cool New Font Viewer - h%p://edgewebfonts.adobe.com

§ Typekit

§ Because you have to list the domains, and IP addresses change, this can be a repetitive chore

§ Have to add IP address to your kit and update every time it changes

§ Solution§ Back to xip.io

§ Other Dynamic DNS Workarounds - h%p://forums.adobe.com/message/4896599#4896599

18

Friday, May 3, 13Hosted web fonts can seem like they’re not working, but these tips will get you going quickly. xip.io again saves the day.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

JS Bin

§ Translate JS Bin URLs to only send the output panel

§ Useful if you want to do JS testing or prototyping across devices

§ Great for playing with code you’re not sure about, or ge%ing help from someone

§ Demo - h%p://jsbin.com/welcome/1/edit

§ What’s Wrong With Dave?

§ Edge Inspect Team Blog - Work!ow post series

§ h%p://blogs.adobe.com/edgeinspect/category/work!ow-enhancements/

19

this is dave ^^

Friday, May 3, 13$anks and a shout out to Remy Sharp, the creator of JS Bin for working with our team to make this possible. $is is seriously cool.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

LiveReload and CodeKit

§ Synchronous browsing with devices and desktop browsers

§ h%p://livereload.com

§ h%p://incident57.com/codekit/

§ SASS & Pre-Processing

§ Asset pipeline and build automation

20

Friday, May 3, 13Excellent front-end work"ow tools, that are even be%er with Edge Inspect.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Open Device Labs

§ Free to the public

§ Local in your cities

§ Start one!

§ Lab Up! h%p://lab-up.org/

§ .net AWARDS 2013 “Game Changer of the Year” (nalist

21

Friday, May 3, 13A little side project that I’ve been working on with Jay Meissner. We’re so pleased with how this is taking off. We have over 60 ODLs opening in cities all over the world. If you can’t start an ODL in your area, consider donating devices. These are all non-profit ODLs, and your donation helps the entire web community.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Q&A

22

Friday, May 3, 13

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Resources

§ Edge Inspect CC Team Blog h%p://blogs.adobe.com/edgeinspect

§ Edge Inspect CC Community Forums: h%p://adobe.com/go/edgeinspect_support

§ Open Device Labs: h%p://opendevicelab.com

§ Lab Up!: h%p://lab-up.org

§ Twi%er:

§ @EdgeInspect

§ Bruce Bowman, @brucebowman

§ Duane O’Brien, @duaneobrien

§ Andre JAY Meissner, @klickass

§ Open Device Labs, @odl

§ Lab Up!, @LabUpOrg

§ Facebook: h%ps://www.facebook.com/EdgeInspect

23

Friday, May 3, 13All of these are linked to from our Edge Inspect team blog, so if you only remember one URL, that’s the one.

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Adobe Edge Tools & Services

§ Optimized for creating mobile-ready web content and apps§ Focused on a speci!c task§ Improve productivity without hiding the underlying web

technologies

24

Friday, May 3, 13Be sure to check out the other Edge Tools and Services. We’re developing these very transparently, and taking feedback form the community as they are in development. You can shape them - get involved!

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

$ank you! Now, please take the SESSION SURVEY on the MAX COMPANION app

25

…for your chance to WIN one of these e-books from Adobe Press

Every survey you submit enters your name to win the daily grand prize -

an Apple® iPod Nano®.

Friday, May 3, 13We really appreciate your interest in our session, and hope you’ll provide feedback so we can measure how we did. We take that feedback seriously and work to improve our sessions.

Thank you!

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Friday, May 3, 13$is is the Adobe that is helping to build a be%er open web. . .