9. Desktop Site
Back-end Code
Mobile User
• Shopping Cart
• Checkout Process
• Payment Processors
• Login/Registration
• Social Integrations
• Inventory Systems
• (other back-end integrations)
How does it work?
10. REMOVE MOBILIZE ADD
desktop your core mobile
only features experience only features
The developer experience
Editor's Notes
Transition from Hackathon into: What is Moovweb? How do I use it? Moovweb is a mobile development framework that gives you total control over the user experience of any site. We ’ re a real-time proxy, we transform your pages on the fly and serve up custom UX for any device. But before we get too far into that, let ’ s step back and get a bigger picture.
That ’ s all the customer knows. You could have the cleanest back-end, huge infrastructure, scalable, persistent, but none of that matters to the user. They don ’ t know about all that, and they wouldn ’ t care if they did know. When I ’ m watching Die Hard, I don ’ t care how difficult it was to create that scene where Bruce Willis is swinging on a rope and smashes through a window. All I ’ m thinking is “ That was awesome. ” The front-end experience is all the customer knows. And for NYTimes, it ’ s a bad one. So we know what we want, a clean slick mobile site that ’ s engaging, fast and intuitive to navigate... but how do we build it?
Well that brings up our second problem because we ’ re certainly not going to start from scratch. The web has been around awhile now and there are some large code bases out there. And it can get messy. Now you ’ re thinking of starting a mobile site, and you ’ re not going to start from the ground up. You ’ re not going to reinvent the wheel. But what are your options? Build on what you already have? It ’ s like you ’ re stuck in this sticky infrastructure and you ’ re trying to find a way out without losing/abandoning everything you ’ ve worked so hard on. Spork analogy? Any analogy?? Use some responsive design. Okay but what about when it gets complicated? What about when we have to start adding all kinds of different views for different types of users? What about when I just have to transform some actual HTML? Okay well then you could add some JavaScript on top of that. Maybe a couple extra libraries to handle the interface. Okay so now it ’ s getting even messier and we ’ re taking a performance hit. Which isn ’ t ideal when you ’ re on mobile. But it ’ s not too bad yet...
And then a new device comes out. Time to do all that again. In the same code base. As an aside, there are awful jokes throughout this PPT. I photoshopped that myself. I was actually looking at that slide this morning, and I realized that person couldn ’ t possibly be holding that iPad like that. It ’ s impossible. If anyone can succesfully do that, they should win a hackathon prize. Okay so we don ’ t want to just keep piling code onto our code base. What do we do?
Enter Moovweb. The experience layer. We ’ ve got all the devices covered. We ’ re device agnostic. For any new wacky iPad medium that comes out, don ’ t worry about it. Detect the user agent and you ’ re off to the races with Moovweb.
Moovweb lowers the barrier to front end development. This is m.macys.com go check it out. Treats it as a first-class citizen. Creates an experience layer just for the front-end. That ’ s a standard for the back-end, creating a separation between APIs and frameworks. Your back end engineers they don ’ t know how everything in each area works. And they shouldn ’ t. It makes sense they don ’ t. But that separation should be a standard for the front-end as well. With Moovweb you can make it so.
We don ’ t care what ’ s going on in your back-end. We don ’ t care about it and we don ’ t want to know. All your desktop features will be inherited on your mobile device. And you ’ ll be able to transform the user experience for all of them. This example is live on m.1800flowers.com, you can check it out yourself. Point out some key design aspects and differences in the UX: navigation, image carousel, header buttons. This is using the same HTML, that ’ s the same content from the desktop site. Being used to create an entirely new user experience. Your Ajax, forms, etc. it just works. We call it site Virtualization.
And finally stay agile for the future. Your changes to the desktop site will flow right through to your mobile devices. The code maintains itself. You ’ ll be able update your existing site to the latest trending UX at any time. Maybe a seasonal UX. Or add a new experience layer for some crazy new device. Google glasses, apple watch (iWatch?).
A mobile device (or any device) makes a request to the existing desktop site as usual... The desktop site then realizing it ’s mobile traffic, redirects it back through Moovweb where... it goes through the Moovweb transformation and out pops your mobile user experience to their device. Some technical details: We ’ve got that transformation hosted for you in the Moovweb cloud and we deploy it using Git. It ’s very similar to heroku for those of you that are familiar with that process.
What does it entail for the developer? The Moovweb transformation is where we give you control over the user experience with the ability to adjust styles (we use Sass ) Resize/add images (we auto sprite ) and javascript (we compress and bundle ) as well as transform the actual HTML itself using our very own Tritium . Tritium selects elements similar to jquery and then provides you with transformation functions that you ’re looking for such as move, remove, change_attributes, change_this_table_into_divs because tables are horrible and so on. We also provide you with a bunch of cool widgets you can use out of the box like togglers, image carousels, tabs, and more. Transition into demo: Michael is going to walk you through how it works to give you a better idea!
