12: Flux Application Architecture & React

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.” - Facebook’s Flux Architecture Home Page -

 

Bill Fisher (@fisherwebdev), Facebook Software Engineer & Lead Developer of the Flux Documentation, joins The Web Platform Podcast for ‘Episode 12:  Flux Application Architecture & ReactJS.’

 

Bill talks with hosts Nick Niemeir (@nickniemeir) & Erik Isaksen (@eisaksen) about Flux, an application architecture similar in ideas to CQRS & Data Flow Programming. It was created to alleviate the performance & scalability problems that Facebook encountered in building Facebook Messenger (Watch Hacker Way: Rethinking Web App Development at Facebook’ - a presentation by Jing Chen, Software Engineer at Facebook, for further information). Flux promotes a unidirectional data flow model through an application. In contrast to MVC, Flux mainly consists of Stores, a central Dispatcher, and Controller-Views.

Facebook has React.js as its view layer and and Flux is quickly becoming the architectural design of choice for many of its other web applications. The support, power, and marketing behind the Angular.js and Ember.js frameworks is undeniable and when Facebook released React.js many developers misunderstood its Virtual DOM approach because it was not like the frameworks developers are used too. Despite that, Facebook has proved itself a ‘contender’ in the eyes of many in the development community and many developers and engineering teams are switching their ‘framework of choice’ to React.js.

 

Flux combined with React.js offers many appealing possibilities but it is not limited to use with just React.js. Flux is an application architecture and it can be used as a pattern in almost any technology stack for web application development.

 

Flux & React Resources

 

Flux Projects In Progress

 

Flux Implementations

 

React Channels

 

Direct download: episode-12_flux-application-architecture-and-react.mp3
Category:React-Flux -- posted at: 2:36pm EDT
Comments[2]

11: The Bosonic Project

Raphael Rougeron joins us from Toulouse, France to talk about The Bosonic Project.  Raphael and his team of developers mostly focus their development efforts working in the Financial Industry, building out secure and robust applications as well as intricate cross browser UI Components. The UI components part of his work is especially interesting in that it led him to create The Bosonic Project.

 

Raphael was frustrated, like most of us, with having to constantly rewrite all of his components every time his team shifted technologies so he created The Bosonic Project. Bosonic, deriving its name from the word Boson, which is a subatomic particle that has zero or integral spin, is a philosophy and supporting tool chain to assist in building better UI components as the standardized Web Component specs (Custom Elements, HTML Imports, Shadow DOM, Templates, and CSS Decorators) describe them. This approach shields components against potential spec changes and provides support for “not-so-modern” browsers like Internet Explorer 9 (IE9).

 

Resources

https://bosonic.github.io/

https://github.com/bosonic/grunt-bosonic

https://github.com/bosonic/bosonic

https://bosonic.github.io/getting-started.html

https://raw.githubusercontent.com/bosonic/bosonic/master/dist/bosonic-polyfills.js

https://github.com/bosonic/transpiler

http://blog.raphael-rougeron.com/

https://twitter.com/goldoraf

Direct download: episode-11_the-bosonic-project.mp3
Category:web-components -- posted at: 7:57am EDT
Comments[0]

10: Mathematics & Dynamic CSS Visualizations

In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don’t Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it’s containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.

 

It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management.


Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc’ give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform’ rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript.

Resources

http://davidwalsh.name

http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24

http://davidwalsh.name/css-supports

http://www.w3.org/TR/css3-values/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

http://css-tricks.com/five-questions-with-david-walsh/

http://codepen.io/collection/wHune/

http://codepen.io/thebabydino/pen/jgtof

http://codepen.io/thebabydino/

http://techblog.rga.com/math-driven-css/

http://davidwalsh.name/css-flip

http://css-tricks.com/a-couple-of-use-cases-for-calc/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://stackoverflow.com/users/1397351/ana

http://davidwalsh.name/svg-animation

http://stackoverflow.com/users/1397351/ana

http://stackoverflow.com/help/badges/17/necromancer?userid=1878132

http://sass-lang.com/

http://www.myth.io/

http://dev.w3.org/csswg/css-extensions/

http://sarasoueidan.com/

http://shoptalkshow.com/episodes/129-sara-soueidan/

http://5by5.tv/webahead/81

http://www.sitepoint.com/css-variables-can-preprocessors-cant/

http://codepen.io/shankarcabus/pen/jcyDA

http://daneden.github.io/animate.css/

http://codepen.io/thebabydino/tag/calc()/

http://figures.spec.whatwg.org/

Direct download: episode-10_mathematics-and-dynamic-css-visualizations.mp3
Category:CSS -- posted at: 9:19am EDT
Comments[1]

9: Web Accessibility for JavaScript Components and Custom Elements

In Episode 9, ‘Web Accessibility for JavaScript Components and Custom Elements’. Steve Faulkner (@stevefaulkner) from The Paciello Group and Marcy Sutton (@marcysutton) from Substantial discuss the lack of focus in product development today in building accessible applications & services. Many times web accessibility becomes an afterthought in creating a software product, having little prioritization from the business side until it is a problem. Retrofitting such an important part of our development can make web accessibility seem more like a chore with low ROI for the the time taken to implement it. It can be easy if developers know how to do it and hardly any work when it is successfully incorporated into a development process and it’s valued at the business level.

 

With recent advances in the past few years in JavaScript MV* frameworks like Angular, React, & Ember we are seeing the need for web accessibility more and more. Heavy JavaScript applications tend to provide little or wrong functionality for things we take for granted like keyboard access. Examples on modifying these to better attend to user experience traditionally meant lots of overhead in development by forking the framework and updating it constantly. Based on the resources developers typically find in online searches & Roles the lack of good developer examples, WAI ARIA & even simple accessibility is easy to misunderstand.

 

Many newer client side frameworks focus on componentization of HTML elements. Angular Directives, Ember Components, React Classes and Web Components. Componentization gives developers a chance to build much faster and easier Web Accessibility using various tools like WAI ARIA roles at a much more focused & reusable level. What is the future of Web Accessibility with these technologies? Why are we so concerned about Web Accessibility?

 

References:

https://github.com/marcysutton/accessibility-of-mvcs

http://www.w3.org/TR/wai-aria/appendices#a_schemata

https://www.youtube.com/watch?v=BgvDZZ8Ms8c

https://www.youtube.com/watch?v=ZPsb-RR8SC0

http://w3c.github.io/aria-in-html/

https://www.youtube.com/watch?v=_IBiXfxhF-A

http://www.polymer-project.org/articles/accessible-web-components.html

http://marcysutton.com/target-corporate-website/

http://www.w3.org/TR/2013/WD-components-intro-20130606/#decorator-section

http://www.paciellogroup.com/blog/

http://www.paciellogroup.com/resources/wat/

http://www.w3.org/WAI/intro/aria

http://webaim.org/

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

 

Comments[1]

1