HTML5 Developer Conference Oct 2015 - my notes

I attended the HTML5 Developer Conference Oct 19 & 20 2015. Below are some brief notes from the sessions I attended. Videos and slides should be up soon.

Most exciting new technology: css grid layout, I want it now, sooo bad
Coolest session: Prototyping the Internet of Things with Firebase (so inspired I ordered an Arduino board to hack with my son)
Best phrase: "Web has changed from where you get things to where you do things"
Its here now: ES6 (widespread adoption is imminent)

ES6 for Everyone! Speaker: Jamund Ferguson, Paypal
- a good presentation but I'm already a fan of E6
- destructuring is so cool, arrow functions great etc
- http://html5devconf.com/speakers/jamund_ferguson.html#session

Falcor: One Model Everywhere Speaker: Jafar Husain, Netflix
- used by Netflix, very interesting idea, very suitable for NetFlix use case i.e. returning large amounts of data, taxomonies, for client to render as well as search thru the json
- I'd like to learn more about how Falcor can pull from different sources, I understand it uses a Falcor route to specify for this json fragment, retrieve from here
- "Web has changed from where you get things to where you do things”

React–Not Just Hype! Speaker: Michael Jackson, ReactJSTraining
- I wanted to attend "Deep Dive: CSS Architecture" but it was full so attended this instead
- "React is 'the right abstraction'"
- templates are not the way to go (the presenter said he's a major mustache contributor), Angular templates require knowledge of DSL and code is in the html. This is a flaw.
- 2 way data binding has side effects, not clear what else is impacted. React means you set state explicitly, easy to know side effects
- Instead of structure around platforms, why not structure around apps e.g. chat, news, ads. FB React team found 80% code reuse across platforms
- React fan-boy for sure

Architecting modern JavaScript apps Speaker: Matt DeBergalis, Meteor
- old web: stateless, request/response, presentation on the wire
- new web: stateful, pub/sub, data on the wire
- javascript is the only reasonable language for cross platform development
- recommends ES6
- connected client: persistent connection, data cached locally, reactive architecture (responds as data pushed), code on client and in cloud

Scaling Engineering Teams with Frontend Services Speaker: Ken Struys, Yelp
- yelp grew 60 engs in 2011 to 200 engs 2013 and the main app became a monolithic app
- deploy rollbacks became common, 30+ changes per deploy, devs became conservative
- Step 1: split app into services
- Step 2: Expose apis to monolith so others can access it AND Make everything new a service
- but in 2014 something still not right, app still a monolith so they:
- split frontend into services
- created HTML renderer services
- each page a unit (still had widgets/components)
- created yelp styleguide (its public)
- share code using private Bower and py-pi for python backend

Prototyping the Internet of Things with Firebase Speaker: Jennifer Tong, Google
- live coding demo: turn on a light on a circuit board using Firebase and Johnny Five library
- Arduino uno
- Johnny-five library (nodejs) github https://github.com/rwaldron/johnny-five
- Firebase
- Johnny-five library has lots of great user friendly examples including pictures of board setup, worth checking out

CSS Grid Layout from the inside out Speaker: Manuel Rego, Igalia
- awesome demo of new proposed css grid standard
- grids using css only!!! brings tears to mine eyes to see whats coming
- showed examples of using css grid for form layout (very nice) as well as pain grids and grids within grids

- slides: http://www.slideshare.net/igalia/css-grid-layout-from-the-inside-out-html5devconf-autumn-2015

Comments

Post a Comment

Popular posts from this blog

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l
Read more

react-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more