Goodbye SPAs?

The (possible) return of the thin client.

• Hotwire (Ruby on Rails 7)
• Phoenix Framework (Elixer)
• Next.js
• Remix

The new hotnesses

The End?

• of SPAs
• of API integration?
• of React?
• of Frontend Development as we know it?

Dramatic much?

Perspective

• HTML
• CSS
• JavaScript
• The Web Platform

Unchanged

Of Pendulums and Paradigms

Of Pendulums and Paradigms

Back to the beginning

In the beginning.

This section is from a presentation I gave 7 years ago. Consider how relevant it is still today.

"One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability."

(http://www.w3.org/Consortium/Points/)

"When you make a link, you can link to anything. That means people must be able to put anything on the Web, no matter what computer they have, software they use or human language they speak and regardless of whether they have a wired or wirless Internet connection."

Tim Berners-Lee, Long Live the Web; 2010 (http://www.scientificamerican.com/article/long-live-the-web/)

"It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large."

Tim Berners-Lee, Long Live the Web; 2010 (http://www.scientificamerican.com/article/long-live-the-web/)

I duz responsive.

I haz the break-points!

"What started out as a method to optimize your designs for various screen widths has turned, ever so slowly, into multiple canvas design."

Mark Boulton, The In-Between; 2013 (http://www.markboulton.co.uk/journal/theinbetween)

"'Responsive' isn’t so much a technique or process, but a fundamental characteristic of the platform"

Paul Robery Lloyd, The Web Aesthetic; 2012 (http://alistapart.com/article/the-web-aesthetic)

"This philosophy implies that the characteristics of a material
should influence the form for which it is used."

Kauffman, Architecture in the Age of Reason; 1955

"To cover brick with plaster, and this plaster with fresco, is perfectly legitimate… But to cover brick with cement, and to divide this cement with joints that it may look like stone, is to tell a falsehood; and is just as contemptible a procedure as the other is noble."

John Ruskin, The Seven Lamps of Architecture, 1849

"I believe every material has a grain, including the web."

Frank Chimero (http://www.frankchimero.com/writing/the-webs-grain/)

"It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all."

John Allsopp, The Dao of Web Design; 2000 (http://www.alistapart.com/articles/dao/)

"No metaphors or analogies are needed for insight, only the willingness to listen to the subject speak for itself, even if it contradicts received wisdom."

Frank Chimero (http://www.frankchimero.com/writing/the-webs-grain/)

"We need to stop thinking of our roles as a division of a whole with well defined lines. If we consider a cake as a metaphor for an application, we tend to think of our individual roles as a slice of that cake. But this is inaccurate. What we do affects the whole outcome...

...Rather we are an ingredient in a cake. We are dispersed throughout it's entirety, interacting with other ingredients in particular ways to produce a poundcake, shortcake, angel-food cake, bundt cake, red velvet, chocolate, strawberry, sheet. There are endless possibilities of the whole when we operate as an ingredient."

Cory, Just now.

CSS

CSS has two responsibilities that are interrelated and which pertain to being _of_ the web. The first is to provide visual structure to the web. It performs for the visual input, what proper HTML provides for the cognitive. Where HTML provides semantics, CSS provides visual meaning. They are really two sides to the same coin.

CSS

The other responsibility CSS provides is ornamentation. Don't let that label trivialize it's importance though. Ornamentation is not simply making things "look pretty" as so many have patronizingly reduced the craft of the front-end to in the past.

"ORNAMENT.  Integral element of architecture, ornament is to architecture what efflorescence of a tree or plant is to its structure.  Of the thing, not on it.  Emotional in its nature, ornament is - if well conceived - not only the poetry but is the character of structure revealed and enhanced.  If not well conceived, architecture is destroyed by ornament."

Frank Lloyd Wright, Language of an Organic Architect; 1953

"It's not just what it looks like and feels like. Design is how it works."

Steve Jobs The Guts of a New Machine, Rob Walker; 2003 (http://www.nytimes.com/2003/11/30/magazine/30IPOD.html)

How does this hold up?

There is not a single thing in this that I would retract. 

Web Fundamentals

• Never starting completely over
• Transferable knowledge
• Growing need for semantic markup expertise
• CSS in the hands of backend devs?

Web Fundamentals

This ain't your grandpa's web platform

• SEO

• ADA compliance

• Internal tooling customer support teams

• Support for power users

• Accessibility

• Internationalization

• Customization

• Mobile devices

• VR

• Things heretofore unimagined

Web Fundamentals

• Aria

• Block-level elements

• Inline elements

• Forms

• Inputs

• Picture

• Video

• Audio

• CORS

• Preloading

Semantic
HTML

• Layout rules

• Decoration rules

• CSS Variables

• CSS Flexbox

• CSS Grid

• aspect-ratio

• houdini

• color functions

CSS

• universal selectors (*, *|*)

• type selectors (a, p, figure, li)

• class selectors (.active, .error)

• id selectors (#first_name, #section1)

• attribute selectors ([open], [href^="http"], [class*="fs"], [class~="card"], [href$=".edu"], [alt="reactjs meetup" i])

• selector grouping

CSS
Selectors

• screen size

• device size

• hoverablity

• pointability

• aspect-ratio

• color

• color-gamut

• inverted-colors

Media
Queries

• orientation

• overflow

• prefers-color-scheme

• prefers-contrast

• prefers-reduced-motion

• scripting

• Container Queries

• CSS Toggles

CSS on the
Horizon