1 Component

3 Frameworks

background Layer 1 @_tonymay

Anthony May

Currently (2017)

Developer at UBank

 

Previously

Identitii - Ng2, Typescript & Golang
Tricky Jigsaw - UX/Innovation
The Means  - Angular/Node.js

background Layer 1 @_tonymay

The Context

background Layer 1 @_tonymay

A Few Questions...

  • What can we learn from the code typescript generates?
  • How does the typescript experience translate to React?
  • How much difference is there between NG1 & NG2?
  • How much difference is there between NG2 & React?
background Layer 1 @_tonymay
background Layer 1 @_tonymay

GoalS Of This Project

  • Core functionality described in typescript classes
  • Create the DRYest code possible
  • Some testing would be nice
  • Reuse these core classes across angular, angular2 and react implementations
  • Profit?
background Layer 1 @_tonymay

Why A Calendar

  • Microsoft has got their house in order
  • Transpilers have abstracted any performance concerns
  • I now write declarative code without worrying so much about x-browser performance or support
  • So I now rely much less on x-browser libraries (moment.js)
  • So I wanted to have another look at native dates
  • I also wanted a example component with the concept of a service, without any backend dependencies
background Layer 1 @_tonymay

Key Outcomes

  • CSS can be reused across frameworks
  • Builds are isolated across frameworks
  • Easy to develop each framework in an isolated manner
  • Parent application/component can consume the current value of the calendar picker
background Layer 1 @_tonymay

Code Structure

Webpack

Webpack Config by Framework

Core Source

Framework Implementation

Compiled Output

Key Outcomes

  • CSS can be reused across frameworks
  • Builds are isolated across frameworks 
  • Easy to develop each framework in an isolated manner  
  • Parent application/component can consume the current value of the calendar picker
background Layer 1 @_tonymay

Core Implementation

Tests

Service Instantiation

Controller Binding

Parent Binding

NG2
Ng1
React

Summary

  • So much to talk about in 1/2 hour, so please checkout the code at, the comments are not too bad :-)
  • The readme is pretty average, tweet me at @_tonymay if you have any questions
  • Roadmap: date ranges, e2e tests, open to suggestions
  • Thankyou!
Made with Slides.com