It's been a neat experience this last couple months reaching out and talking to some of our favorite Foundation fans. We've received some great feedback on our code for a new Flexbox-based grid. We've also had some great tips about our upcoming Motion UI codebase. We're getting ever closer to a comprehensive release that we just know y'all will love.
In the final part of our three-part Foundation for Apps saga, we'll discuss our AngularJS Integration and how it helps you produce single-page web apps. So let's get into it.
Designers have been building pages since the web began. All the tools we've created have gone along with that mentality. Yet, in a web where pages are becoming more rare, so will those tools.
Many people are attempting to bridge this gap — from in-depth GUIs to device-specific code bases — but no one has created a way to easily showcase a fully-responsive, single-page web app. The future of web apps will involve states rather than entirely new pages, and showing that has been one of our main goals for Foundation for Apps. We're going to bridge this divide, and we're preparing to release it soon to the open-source community.
All Muh Single Pages. All Muh Single Pages.
Single-page web apps are super hot, and you should really be building them. Not just because they're hot, but because they're super useful. Tons of apps are being built as a single-page apps — things like Gmail, Twitter, and both Spotify and Rdio. So why are so many large-scale apps going with stateful single pages rather than multipage designs?
They make the web feel more like native apps because they don't require a page reload. Users get to content faster and with the benefit of knowing how they got there. The app simply pulls the content the user needs when they need it. Translation: designers can add content when contextually relevant and remove it when it's not. This becomes hugely important when dealing with apps that need to layer in complexity over the course of the product lifecycle.
AngularJS & ZURB
There are tons of MVC frameworks out there and more popping up everyday. Choosing was difficult, but after speaking to the Foundation community and ZURB's own clients, both startups and enterprise alike, we've decided Angular was the best choice to build from. It gives us some neat new toys that will both help speed up development and make some really cool apps.
Web Component Driven Development
Using Angular directives, we can take advantage of easy to remember names for all Foundations components, so instead of code like <div class='modal' data-modal> we'll be able to simply type <fa-modal>. Fewer classes and divs for the developer or designer to remember is great as it allows for better consistency across the team. No need to think as much about whether a tag should be a span or a header or a div or a section. Just <fa-____>.
Easily define motion throughout your app
This will help us integrate Foundation Motion UI classes to build up animations and apply them to views. Angular gives the ability to define "enter" and "exit" animations for each individual view and allows for a more polished, slick experience.
A jQuery-familiar syntax
We've been using jQuery since the start of Foundation and one of the hardest parts about moving to an MVC was saying goodbye to that deeply ingrained knowledge base. The beauty of Angular is that it comes with jQLite, which aims to implement the most commonly functional areas of jQuery. This allows users to use the basics of jQuery's markup and selectors, but also gives them the ability to import the entirety of jQuery if they choose to.
A Prototype is Worth 1,000 Meetings
Prototypes are great for user tests and simply to get buy in from the rest of the team. They're powerful tools that are rapidly produced, but highlight the app's feasibility. Tools, like our own ZURB Solidify, and other companies, like Invision and Marvel, are great for early prototypes that don't require the highest of fidelity, but they falter when attempting to show true fluidity of a single-page app. They're great for lo-fi prototypes and even in some cases hi-fi prototypes, but we're looking to show more. At ZURB, we've come to call our Angular-based coded prototypes "HD-prototypes," and we think you should too.
Foundation for Apps will let designers and developers easily create multi-view prototypes complete with partial swapping and animations. And to top it off, it works across devices. No need to know Angular just to prototype a single-page web app. The basics of which are: swapping views; changing the urls for those views; and, finally, animating them in and out.
We're building on top of the great work from the UI Router Team, but making it even easier. We know our designers and others we've talked to love static-site generators, like Jekyll and Assemble, so we set those as our baseline of simplicity. Since we know routes can be confusing, we're ensuring that you never touch a JS file, unless you want to. The user can define URLs and animations directly in their HTML templates, rather than in a JavaScript file. Then we'll use Gulp to parse the template tags and place it in the correct code chunks. The result is a single-page web app without ever writing a single line of JS. Neat!
You'll write
We'll parse out:
From Prototype to Live Web App
We wanted to ensure that you can easily go from prototype to live web app without the need to just waste designers' time and code. The markup, animations and directives are super solid, so it would be a shame to toss that markup. So we expect devs to use the same markup, but replace our prototypes routes with their own and replace our static partials with dynamic data. This is going to make getting from prototype to dynamic web app lightning fast.
Designers will love writing apps in the HTML and CSS they already know and devs will love getting an in-depth prototype instead of just an annotated PSD. We can already see a better working relationship between the two and a quicker end product because we've minimized the duplication of work.
See For Yourself
We're almost at an initial release and we want to share our work with you, the community. Sign up below and let us know you want access to our beta of Foundation for Apps, now with Angular integration.