Road to #PWACamp / Programming

On Jul 22, 2017, we will be running the first Study Camp event focused on Progressive Web Apps (PWA) through the Google Developer Group NYC, hosted at General Assembly in New York.

You can find out more about the agenda on our event page and purchase tickets to attend it here. Use the promo code pwa-30 to get a 30% discount for a limited time.

This is the 2nd installment of a series of articles focused on PWA in the days leading to #PWACamp. You can read the first article here – and also find a listing of the entire series there as it progresses.

#PWACamp Session 2: Programming

Understanding the concepts is important, and having tools and libraries to facilitate development is critical – but as a developer, how do you get started? This is the focus of the second segment of our camp, and something that we hope to elaborate on a bit here.

At a high level, we want to support two kinds of learning behaviors:

• Breadth First. This is for developers who are interested in exploring these concepts with code, but not necessarily tied to a specific framework or build process. In such cases, what would be the simplest way to start exploring ideas with code without having to worry about build processes, deployment options and development environment setup?
• Depth First. This is for developers who are working with a specific front-end technology and interested in understanding how they can integrate PWA capabilities into their apps, or audit existing apps for compliance. In such cases, the real focus is on getting some hands-on experience with the libraries/tools and workflow specific to that front-end.

The 2-hr Programming segment effectively allows you to pick your own adventure – you will hear about two possible options in the instructor-led segment, and then explore those (or other alternatives) through hands-on codelabs in the self-guided segment, with the help of our on-site mentors. The two talks in this segment are:

Building With Glitch

Glitch is the friendly community where you will build the app of your dreams. Built by the amazing folks at FogCreek, Glitch is effectively a cloud-based “sandbox where you can edit, build and deploy your web apps in one platform, right from the browser.

More importantly, you can learn by remixing – simply look for example apps that provide specific features or leverage specific APIs, and then remix it to create a custom version that helps you better understand the underlying concepts. Learn about their vision here.

Pirijan (@pketh), Dev/Designer on Glitch team, will speak at #PWACamp about how Glitch works & how you can “remix existing PWA examples.

PWA On Glitch:

Glitch has some PWA examples already available today that might be good places to start for a “Remix”. Take a look at these examples from our other #PWACamp speakers @kosamari and @jeffposnick

Or this simple PWA demo from Paul Kinlan

Building PWA with Angular

Angular is amongst the first frameworks to embrace declarative coding of web apps with composability, testability and performance as core tenets. In Angular 2.x, Progressive Web Apps are core to cross-platform support, making it arguably the most popular PWA-ready web app option today.

Michael Solati, GDG New Haven Organizer & Full-Stack Dev, will walk us through building a PWA with Angular at #PWACamp.

Want to learn more about how you can build great PWA experiences with Angular? Check out this talk from Google IO, then bring your laptop and come prepared to follow-along with Michael, or do a self-guided codelab.

And check out the Angular Mobile Toolkit: https://mobile.angular.io/

Building PWA with other frameworks

But what if you are already working with a different production framework? Maybe that’s React? Or Vue? Or Polymer? Or Backbone? Not a problem.

Come to #PWACamp where we will have a set of resources available for you to start exploring development with any front-end framework – you will have mentors to help with existing codelabs plus a chance to ask your questions on PWA adoption from both members of the Google Chrome & DevRel teams as well as industry experts.

Watch this space for more resource links.

Resources:

1. Google IO 2017 Codelabs – with numerous codelabs updated for the latest features and tools. We’ve identified a few useful ones below.
2. Codelab: Your First Progressive Web App
3. Codelab: Migrate your site to a PWA
4. Codelab: PWA with Polymer & Firebase
5. Create-React-App with PWA – @jeffposnick PR was merged in May 2017