SlideShare a Scribd company logo
Scalable UI development at
         a breakneck pace
                      Phil Crosby
Phil Crosby
                             Tech lead of Ooyala Backlot



Ninjawords.com
Vimium - a Vim-like browsing experience for
Chrome
shoulda.js
livecss

                                                           2
Context - what we’re
                         building here

A product with
 Lots of functionality
 Lots of views (pages)
 New stuff each and every day



                                     3
Goals for our development
                        approach

Build lots of high quality UI with only a handful
of developers.
Iterate very quickly, build a malleable product.
No bugs!




                                                    4

Recommended for you

VisionX Prototyping.
VisionX Prototyping.VisionX Prototyping.
VisionX Prototyping.

Create Business Software without IT knowledge. This presentation shows how VisionX works. Use VisionX for Prototyping, Specifications or Software Development. Save up to 90% of your project costs.

visionx "application development" prototyping
Vue Storefront Basics
Vue Storefront BasicsVue Storefront Basics
Vue Storefront Basics

Vue Storefront is a PWA frontend for eCommerce that is backend-agnostic and can integrate with any eCommerce platform. It is a fast, mobile-first solution built with Vue.js that works offline and provides an app-like experience. Key features include ultrafast performance, painless upgradability, and the ability to modify themes and extend functionality without limitations. It solves common issues with mobile eCommerce like slow speeds, instability, and poor user experiences.

ecommercepwamagento
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web Development

Become a complete developer by learning front-end and back-end technologies in this Full Stack Web Developer Course. These are just a few of the 40 different apps that are part of this brilliant course. With this course, you will not only learn a whole lot of different technologies, but also become a complete developer. So, what are you waiting for? Let’s become a Master Developer with this Full Stack Web Development Bundle Course. For More Info : https://www.eduonix.com/courses/Web-Development/the-full-stack-web-development?coupon_code=kedu15

full stack web developerfull stack engineerfullstack academy
Frontend development
            strategies




                     5
Frontend development
                           strategies

1. A thin client philosophy




                                    5
Frontend development
                           strategies

1. A thin client philosophy
2. Standalone views




                                    5
Frontend development
                           strategies

1. A thin client philosophy
2. Standalone views
3. Richness through a very light layer AJAX




                                              5

Recommended for you

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...

Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them. We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer. In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape. Comparing Angular, Ember, Backbone, and React 2 Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.

apprenticeshipemberjshtml
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice

This document discusses the architecture of social network services. It provides background on the evolution of social networks, including some of the earliest networks like Cyworld and the introduction of features by platforms like Twitter and Facebook. It notes that social networks have functions like timelines, newsfeeds, and aggregating friends' updates. The document also suggests that building social network services is challenging due to the large amount of real-time data generated every minute on the internet.

Get Started with JavaScript Frameworks
Get Started with JavaScript FrameworksGet Started with JavaScript Frameworks
Get Started with JavaScript Frameworks

Presented as a GrapeCity webinar on May 24, 2017, this presentation describes the need for front-end JavaScript frameworks in modern web development and compares features of the most popular frameworks. Click through the slides to find quick summaries of the most important talking points for each framework along with links to demos, an e-book, and a free download of the Wijmo JavaScript UI library. With front-end web frameworks now more popular than ever, there's never been a better time to start learning!

software developmenthow toframework
Frontend development
                           strategies

1. A thin client philosophy
2. Standalone views
3. Richness through a very light layer AJAX
4. Build on powerful primitives, like CSS3.




                                              5
Frontend development
                           strategies

1. A thin client philosophy
2. Standalone views
3. Richness through a very light layer AJAX
4. Build on powerful primitives, like CSS3.
5. Robust server and client side testing pipeline


                                                    5
A thin client philosophy




                       6
A thin client philosophy


Choose a thin client.




                                   6

Recommended for you

Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet

My opening keynote from Responsive Field Day 2015 (https://www.responsivefieldday.com/) in Portland OR.

atomic designresponsive web design
Maintainable design
Maintainable designMaintainable design
Maintainable design

The document discusses how a designer's decisions impact a project's architecture and maintainability. It emphasizes that designers and developers should cooperate, with the designer understanding how developers work and creating reusable components. This allows developers to easily reuse code for different views, making the application faster and easier to maintain. The document recommends designers create a style guide documenting conventions and common components to help developers understand the design vision.

uxwebdesignpwa
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt

1. The document discusses several popular JavaScript frameworks including AngularJS, Node.js, Agility.js, and Backbone.js. It provides overviews of each framework and their architectures. 2. AngularJS is an open-source framework maintained by Google that assists with single-page applications. Node.js is a platform for scalable server-side applications. Agility.js is a lightweight MVC library, and Backbone.js helps organize code for single-page apps. 3. Each framework has advantages like reusability, testability and being lightweight, though some have disadvantages like learning curves or added complexity. The document provides examples of applications that use each framework.

web application developmentjavascript arraysjavascript frameworks
A thin client philosophy


Choose a thin client.
We love stupid client apps.




                                   6
A thin client philosophy


Choose a thin client.
We love stupid client apps.
No behavior, no smarts => fewer places for
bugs to hide in the client.



                                             6
Standalone views
Goal: work on each view independently of the
others

Mechanics:




                                               7
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view




                                               7

Recommended for you

Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017

Here we defined top 5 javascript frameworks and its comparison which help you to better understand what is JS frameworks and why angularJS is best among them.

javascript frameworkswhy angularjs is used
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps

Here is the blog: http://www.aurorasolutions.io/architecture-workflow-of-modern-web-apps/ In the IT industry the biggest problem we regularly face is the abundance of choice. We have tons of frameworks, languages, tools, platforms, etc. Although for competition purposes; multiple choices are ultimately very good but we usually find ourselves in paralysis when we have to choose among them for our next project. People usually still consider that (frontend) of web applications are created by mixing together HTML, CSS & JavaScript without giving any thoughts about the frontend architecture, workflow and testing; but things have definitely changed now since last couple of years and in this presentation I try to explain that how JavaScript and it’s related stuff has become first class citizen and how the new workflow looks like. And I will also explain that how the architecture of modern web applications is migrating from thick server-side applications to smart clients and services on their journey North to pure Microservices. Here is the list of different tools and frameworks that have been discussed in this presentation: * Yeoman: (http://yeoman.io/) Yeoman is the web’s scaffolding tool for modern webapps. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. * Bower: (http://bower.io/) Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you. * Grunt: (http://gruntjs.com/) Grunt is a task-based command line build tool for JavaScript projects. When you work on large projects you have couple of things that you do regularly and you would like them to be automated; Grunt is the tool to solve that problem! * HTML5 Boilerplate: (https://html5boilerplate.com/) HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. * Twitter Bootstrap: (http://getbootstrap.com/2.3.2/) Sleek, intuitive, and powerful front-end framework for faster and easier web development. * Jasmine: (https://github.com/jasmine/jasmine) Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. * Karma: (https://github.com/karma-runner/karma/) A simple tool that allows you to execute JavaScript code in multiple real browsers. * PhantomJS: (https://github.com/ariya/phantomjs/) PhantomJS is a headless WebKit scriptable with JavaScript. * Protractor: (https://github.com/angular/protractor) Protractor is an end-to-end test framework for AngularJS applications.

angularjsyeomangrunt
Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010

Comparing JVM Web Frameworks Presentation from Devoxx 2010. Compares many different JVM-based web frameworks, ranks them based on 20 different criteria and compares the Pros, Cons and other stats of the top 5.

wicketrailsplayframework
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view
- is addressable




                                               7
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view
- is addressable
- stateless




                                               7
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view
- is addressable
- stateless
- has a uniform interface



                                               7
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view
- is addressable
- stateless
- has a uniform interface
Every view can serialize itself into query string
params


                                                    7

Recommended for you

Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022

Complete guide on how to hire full stack web developer in 2022. It includes full stack developer benefits, best full stack combinations, and tech skill set.

full stack developerbenefitstech
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation

The document discusses various web application frameworks and technologies for building Java-based web applications. It summarizes the pros and cons of different languages and frameworks for web development like Java, PHP, Ruby on Rails. It also discusses specific frameworks for Java like Struts, Spring, and Hibernate. Popular companies using Java for web applications are also listed along with strategies for scaling Java web apps.

Standardization in W3C
Standardization in W3CStandardization in W3C
Standardization in W3C

Introduction of standardization methods in W3C. 오늘 TTA에서 진행된 국제표준전문가 교육과정에서 W3C에서의 표준화 활동 및 기고서 제출 방법 들에 대한 발표 자료입니다. W3C 표준화 활동에 관심있으신 분들은 참고하시길 바랍니다.

meetingw3cf2f
Standalone views
Goal: work on each view independently of the
others

Mechanics:
Every view
- is addressable
- stateless
- has a uniform interface
Every view can serialize itself into query string
params
Views are connected with a light layer of ajax
                                                    7
Powerful, powerful primitives

jQuery (benefits are well-known)
HTML5
CSS3
SASS
Leverage only cutting-edge browsers.


                                       8
CSS3 - FEEL THE POWER!




                     9
CSS3 - FEEL THE POWER!

Lots of malleability for programmers to refine
UI.
Finally the expressiveness needed to cover
most styling techniques.
Box layouts, rounded corners, shadows,
gradients, and bears!


                                                 9

Recommended for you

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...

Good frontend development is hard. Scaling frontend development is even harder because you need to ensure that multiple teams can work on a big and complex project simultaneously and without any blockers. Today you often hear about micro frontends which are one of the more controversial Web topics. What are they? Are they worth all the fuzz? Should you implement them? As someone who worked at integrating this in Infobip’s Web Interface, I want to use our example to show you our way of thinking: how did we know that we have problems, how did we decide to approach the implementation of micro frontend architecture and why did we decide to go with it, and which problems we ran into. We will also look at alternate available possibilities useful for anyone.

shift conferenceshift devshift remote
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.

responsive designweb design and developmentweb
Build fast word press site in react in 30 mins with frontity
Build fast word press site in react in 30 mins   with frontityBuild fast word press site in react in 30 mins   with frontity
Build fast word press site in react in 30 mins with frontity

Build a WordPress website in React within 30 mins. Which you can benefit from features like Server Side Rendering, 100% Lighthouse score, or code splitting.

frontityreactjsreact
SASS - Bring structure to CSS


A DSL on top of CSS.
Provides nesting, variables, color arithmetic.
Write custom functions and macros to group
and reuse CSS code.



                                                 10
No love for IE




             11
No love for IE


Chrome Frame should win the 2011
Humanitarian Award.




                                      11
No love for IE


Chrome Frame should win the 2011
Humanitarian Award.
According to StatCounter’s worldwide stats for
this month, IE6 usage is down to 6% and IE7 is
down to 10%.



                                                 11

Recommended for you

Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014

Developing large apps is difficult. Ensuring that code is consistent, well structured, tested and has an architecture that encourages enhancement and maintainability is essential. When it comes to building large server-focused apps the solutions to this problem have been tried and tested. But, how do you achieve this when building HTML5 single page apps? BladeRunnerJS is an open source developer toolkit and lightweight front-end framework that has helped Caplin Systems ensure that a 200k LoC JavaScript codebase hasn’t become a tangled mess of unstable spaghetti code. This codebase is packaged and delivered to customers as an SDK. Additionally customers receive a getting started application of around 50k LoC for them to build upon, and they’re expected not to turn that into a tangled … you get the idea. In this talk you’ll learn the main concepts to apply when building a front-end app that scales and how BladeRunnerJS can support the development process.

brjsenterprisetooling
5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 2022

Web app development is another buzz in the market, and many companies or businesses admire this new way to reach more audiences and enjoy more benefits. While developing interactive and robust web apps for frontend and backend, you might have heard the term ‘web frameworks’ many times. Right? Web frameworks play a crucial role in web app development and creating online platforms. Talking specifically about the backend framework, it is suitable enough to ensure better scalability and high performance.  Well, there is a high possibility you want to delve more into this topic. Therefore, we have covered some popular backend frameworks utilized in web application development. 

web app developmentweb developmentmobile application development
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx

Did you know that tech giants like Amazon, Netflix, Tumblr, PayPal, and Reddit use Node.js? Quite fascinating stats, right? No surprise, Node.js has gained wide popularity in the realms of technology. But why is all this Node.js buzz? To be honest, Node.js is popular because it uses JavaScript, which is the only choice to develop web apps in the browser. Not only this, but this technology also supports microservices architecture, which is powerful and suitable for organizations of any distinct size.  With 61,000+ stars on GitHub, 7.49K votes on StackShare, and 2450 contributors, there is no shadow of a doubt that Node.js is the fastest-growing open-source project every developer is interested in learning. 

web & mobile app developmentfull stack developmentweb development company
Our testing pipeline




                   12
Our testing pipeline

Most logic lives in server-side Ruby code, and
so that's where we write all of our tests.




                                                 12
Our testing pipeline

Most logic lives in server-side Ruby code, and
so that's where we write all of our tests.
HTML output is easy to assert against.




                                                 12
Our testing pipeline

Most logic lives in server-side Ruby code, and
so that's where we write all of our tests.
HTML output is easy to assert against.
Our client side testing tools:
- v8: Chrome's command line JavaScript engine
- env.js (also check out JSDom)
- Shoulda.js (github.com/philc/shoulda.js)


                                                 12

Recommended for you

RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?

RightScale provides a framework for operations that standardizes infrastructure management and allows operations to evolve alongside engineering. It treats infrastructure like software development with reusable components, simplifying operations and reducing technical debt. This framework allows organizations to build infrastructure consistently across clouds, commoditize resources, and empower engineers to take on operational roles through a modern DevOps approach.

cbs interactiverightscaleerik osterman
The Best Web Development Services And Company in Usa
The  Best Web Development  Services And Company in UsaThe  Best Web Development  Services And Company in Usa
The Best Web Development Services And Company in Usa

Elevate your digital presence with a seasoned Custom Web Development Services. Expert guidance for creating impactful websites. Contact us today! We are the best web developing company in USA ,after all we provide the quality of service you are looking for. We have years of experience in website design and development. This enhances user experience. We are a versatile web design and development agency. We ensure user-centric solutions for client's growth. We create valuable content to attract and engage audience.

node js web development servicangular development servicesweb development
Mainframe, the fast PHP framework
Mainframe, the fast PHP frameworkMainframe, the fast PHP framework
Mainframe, the fast PHP framework

This document provides an overview of MainframePHP, a PHP framework based on CodeIgniter. It discusses Mainframe's focus on web apps and inclusion of popular open source tools. The speaker then covers several case studies that use Mainframe, how Mainframe improves productivity over CodeIgniter, its performance capabilities even on low-powered servers, ease of learning for new developers familiar with CodeIgniter, its theme system, asset management features, plugin support via HMVC, and organization of libraries.

phpcodeigniterweb
Takeaways




        13
Takeaways

We've refined this approach through building
lots of frontend product and tenaciously
enhancing team productivity.




                                               13
Takeaways

We've refined this approach through building
lots of frontend product and tenaciously
enhancing team productivity.
This frontend development approach has
worked really well for us!




                                               13
Takeaways

We've refined this approach through building
lots of frontend product and tenaciously
enhancing team productivity.
This frontend development approach has
worked really well for us!
Here are a few tools which may come in handy:
livecss
shouda.js
require.js
                                                13

Recommended for you

WebAssembly with Rust
WebAssembly with RustWebAssembly with Rust
WebAssembly with Rust

This is session is on WebAssembly with Rust. In which first we will discuss web assembly in detail then we will discuss how the WebAssembly will change the dimension of web development followed with the Demo and see some Live applications working on WebAssembly.

webassemblyrustrustprogramminglanguage.
ICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To App

This document summarizes René Winkelmeyer's presentation on developing native mobile apps from idea to app. The presentation covers the business case for developing native apps, an overview of the Model-View-Controller pattern, a demonstration of Xcode as the IDE for developing iOS apps, and resources for learning iOS development. It provides an introduction to the key topics that will be discussed in the session.

objective-cibmswift
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications

What are enterprise apps? should you build a native or a html5 mobile app? How is the performance of HTML5 on mobile and other lessons learnt form building web based mobile apps for enterprises.

html5enterprisemobile
THANK YOU

More Related Content

What's hot

Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
Agriya services
Agriya servicesAgriya services
Agriya services
iScripts
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
RoshanTak1
 
VisionX Prototyping.
VisionX Prototyping.VisionX Prototyping.
VisionX Prototyping.
SIB Visions GmbH
 
Vue Storefront Basics
Vue Storefront BasicsVue Storefront Basics
Vue Storefront Basics
Filip Rakowski
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web Development
Sam Dias
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
Prasid Pathak
 
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
NAVER D2
 
Get Started with JavaScript Frameworks
Get Started with JavaScript FrameworksGet Started with JavaScript Frameworks
Get Started with JavaScript Frameworks
Christian Gaetano
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
Brad Frost
 
Maintainable design
Maintainable designMaintainable design
Maintainable design
Filip Rakowski
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
Omkarsoft Bangalore
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
Rasheed Waraich
 
Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010
Matt Raible
 
Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022
Katy Slemon
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
Jonathan Abrams
 
Standardization in W3C
Standardization in W3CStandardization in W3C
Standardization in W3C
Jonathan Jeon
 
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Conference
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 

What's hot (20)

Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Agriya services
Agriya servicesAgriya services
Agriya services
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
VisionX Prototyping.
VisionX Prototyping.VisionX Prototyping.
VisionX Prototyping.
 
Vue Storefront Basics
Vue Storefront BasicsVue Storefront Basics
Vue Storefront Basics
 
The Full Stack Web Development
The Full Stack Web DevelopmentThe Full Stack Web Development
The Full Stack Web Development
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
 
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
1.[d2 오픈세미나]on thearchitectureofsocialnetworkservice
 
Get Started with JavaScript Frameworks
Get Started with JavaScript FrameworksGet Started with JavaScript Frameworks
Get Started with JavaScript Frameworks
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Maintainable design
Maintainable designMaintainable design
Maintainable design
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010
 
Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022Ultimate guide on how to hire full stack web developer in 2022
Ultimate guide on how to hire full stack web developer in 2022
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
 
Standardization in W3C
Standardization in W3CStandardization in W3C
Standardization in W3C
 
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 

Similar to How to do Scalable UI-Heavy Development at a Breakneck Pace

Build fast word press site in react in 30 mins with frontity
Build fast word press site in react in 30 mins   with frontityBuild fast word press site in react in 30 mins   with frontity
Build fast word press site in react in 30 mins with frontity
Imran Sayed
 
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Phil Leggetter
 
5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 2022
75waytechnologies
 
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
75waytechnologies
 
RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?
Erik Osterman
 
The Best Web Development Services And Company in Usa
The  Best Web Development  Services And Company in UsaThe  Best Web Development  Services And Company in Usa
The Best Web Development Services And Company in Usa
technoprofiles
 
Mainframe, the fast PHP framework
Mainframe, the fast PHP frameworkMainframe, the fast PHP framework
Mainframe, the fast PHP framework
bibakis
 
WebAssembly with Rust
WebAssembly with RustWebAssembly with Rust
WebAssembly with Rust
Knoldus Inc.
 
ICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To App
René Winkelmeyer
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications
Manish Garg
 
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Katy Slemon
 
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
GreeceJS
 
Leading Node.JS Development Services Company in India.docx
Leading Node.JS Development Services Company in India.docxLeading Node.JS Development Services Company in India.docx
Leading Node.JS Development Services Company in India.docx
Shilsha Technologies
 
Leading Node.JS Development Services Company in India.pdf
Leading Node.JS Development Services Company in India.pdfLeading Node.JS Development Services Company in India.pdf
Leading Node.JS Development Services Company in India.pdf
Shilsha Technologies
 
Choosing a JVM Web Framework
Choosing a JVM Web FrameworkChoosing a JVM Web Framework
Choosing a JVM Web Framework
Matt Raible
 
Hybrid Mobile App Development Frameworks 2016
Hybrid Mobile App Development Frameworks 2016Hybrid Mobile App Development Frameworks 2016
Hybrid Mobile App Development Frameworks 2016
PixelCrayons
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch
 
WebAssembly with Rust
WebAssembly with RustWebAssembly with Rust
WebAssembly with Rust
Knoldus Inc.
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
Arafat Hossan
 
11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf
kalichargn70th171
 

Similar to How to do Scalable UI-Heavy Development at a Breakneck Pace (20)

Build fast word press site in react in 30 mins with frontity
Build fast word press site in react in 30 mins   with frontityBuild fast word press site in react in 30 mins   with frontity
Build fast word press site in react in 30 mins with frontity
 
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
 
5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 2022
 
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
 
RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?RightScale User Conference: Why RightScale?
RightScale User Conference: Why RightScale?
 
The Best Web Development Services And Company in Usa
The  Best Web Development  Services And Company in UsaThe  Best Web Development  Services And Company in Usa
The Best Web Development Services And Company in Usa
 
Mainframe, the fast PHP framework
Mainframe, the fast PHP frameworkMainframe, the fast PHP framework
Mainframe, the fast PHP framework
 
WebAssembly with Rust
WebAssembly with RustWebAssembly with Rust
WebAssembly with Rust
 
ICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To AppICONUK 2014 - From Idea To App
ICONUK 2014 - From Idea To App
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications
 
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
Top 10 Node.JS Frameworks To Gear Up Your Web App Development in 2021
 
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
 
Leading Node.JS Development Services Company in India.docx
Leading Node.JS Development Services Company in India.docxLeading Node.JS Development Services Company in India.docx
Leading Node.JS Development Services Company in India.docx
 
Leading Node.JS Development Services Company in India.pdf
Leading Node.JS Development Services Company in India.pdfLeading Node.JS Development Services Company in India.pdf
Leading Node.JS Development Services Company in India.pdf
 
Choosing a JVM Web Framework
Choosing a JVM Web FrameworkChoosing a JVM Web Framework
Choosing a JVM Web Framework
 
Hybrid Mobile App Development Frameworks 2016
Hybrid Mobile App Development Frameworks 2016Hybrid Mobile App Development Frameworks 2016
Hybrid Mobile App Development Frameworks 2016
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
WebAssembly with Rust
WebAssembly with RustWebAssembly with Rust
WebAssembly with Rust
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
 
11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf
 

Recently uploaded

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 

Recently uploaded (20)

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 

How to do Scalable UI-Heavy Development at a Breakneck Pace

  • 1. Scalable UI development at a breakneck pace Phil Crosby
  • 2. Phil Crosby Tech lead of Ooyala Backlot Ninjawords.com Vimium - a Vim-like browsing experience for Chrome shoulda.js livecss 2
  • 3. Context - what we’re building here A product with Lots of functionality Lots of views (pages) New stuff each and every day 3
  • 4. Goals for our development approach Build lots of high quality UI with only a handful of developers. Iterate very quickly, build a malleable product. No bugs! 4
  • 5. Frontend development strategies 5
  • 6. Frontend development strategies 1. A thin client philosophy 5
  • 7. Frontend development strategies 1. A thin client philosophy 2. Standalone views 5
  • 8. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 5
  • 9. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 4. Build on powerful primitives, like CSS3. 5
  • 10. Frontend development strategies 1. A thin client philosophy 2. Standalone views 3. Richness through a very light layer AJAX 4. Build on powerful primitives, like CSS3. 5. Robust server and client side testing pipeline 5
  • 11. A thin client philosophy 6
  • 12. A thin client philosophy Choose a thin client. 6
  • 13. A thin client philosophy Choose a thin client. We love stupid client apps. 6
  • 14. A thin client philosophy Choose a thin client. We love stupid client apps. No behavior, no smarts => fewer places for bugs to hide in the client. 6
  • 15. Standalone views Goal: work on each view independently of the others Mechanics: 7
  • 16. Standalone views Goal: work on each view independently of the others Mechanics: Every view 7
  • 17. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable 7
  • 18. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless 7
  • 19. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface 7
  • 20. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface Every view can serialize itself into query string params 7
  • 21. Standalone views Goal: work on each view independently of the others Mechanics: Every view - is addressable - stateless - has a uniform interface Every view can serialize itself into query string params Views are connected with a light layer of ajax 7
  • 22. Powerful, powerful primitives jQuery (benefits are well-known) HTML5 CSS3 SASS Leverage only cutting-edge browsers. 8
  • 23. CSS3 - FEEL THE POWER! 9
  • 24. CSS3 - FEEL THE POWER! Lots of malleability for programmers to refine UI. Finally the expressiveness needed to cover most styling techniques. Box layouts, rounded corners, shadows, gradients, and bears! 9
  • 25. SASS - Bring structure to CSS A DSL on top of CSS. Provides nesting, variables, color arithmetic. Write custom functions and macros to group and reuse CSS code. 10
  • 26. No love for IE 11
  • 27. No love for IE Chrome Frame should win the 2011 Humanitarian Award. 11
  • 28. No love for IE Chrome Frame should win the 2011 Humanitarian Award. According to StatCounter’s worldwide stats for this month, IE6 usage is down to 6% and IE7 is down to 10%. 11
  • 30. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. 12
  • 31. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. HTML output is easy to assert against. 12
  • 32. Our testing pipeline Most logic lives in server-side Ruby code, and so that's where we write all of our tests. HTML output is easy to assert against. Our client side testing tools: - v8: Chrome's command line JavaScript engine - env.js (also check out JSDom) - Shoulda.js (github.com/philc/shoulda.js) 12
  • 33. Takeaways 13
  • 34. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. 13
  • 35. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. This frontend development approach has worked really well for us! 13
  • 36. Takeaways We've refined this approach through building lots of frontend product and tenaciously enhancing team productivity. This frontend development approach has worked really well for us! Here are a few tools which may come in handy: livecss shouda.js require.js 13

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n