Compare reusable components in react and angular in current projects
compare reusable components in react and angular in current projects
resume overview
reusable components -motivation -
- from construction to high school to es6
- searching for a pattern language
- "The elements of this language are entities called patterns. Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice"
background overview
construction
- first time homeowner urban infill.
- the game -connect with a developer, show up at community meetings, provide cost (from prior accurate unit cost data with current prices) feedback on designs, win the bid pg:x-
- "You can use [a pattern language] to work with your neighbors, to improve your town and neighborhood. You can use it to design a house ... and you can use it to guide you in the actual process of construction."
construction and software
- automation, reusabilty
- productivity and ease of use
research
- Boston University - Dept of Cognitive and Neural Systems - models of cognition
- computer vision, audition, movement memory and learning
- I worked mostly on memory and learning and little bit on vision. In our models a sensory input would be represented by a feature vector. Typically these vectors got fed into a neural network where they mapped to stored memories. Recognition or learning depended on the network of neural connections and the weighting or strength of those connections. Learning modified them. Recognition found a match.
research and software
- modeling hard problems, implementing models in matlab
- big data
- little reusability
- why mathworks answer - productivity and quality
education and teaching
- National Science Foundation grant - BU, MIT and Brandies Center of Excellence for Learning in Education, Science and Technology A National Science Foundation Science of Learning Center
- from MCAS mathematics to Humanities teacher
software and teaching
- learning to code by reading code
- accessing through a clear api
- file:///C:/Users/tim/OneDrive/pathboston/code/hosted/assess/WikiBot/addPages2Users.html
- C:\Users\tim\OneDrive\pathboston\code\hosted\assess\WikiBot\addPages2Users.php
consulting
- renewable energy, and ecological building
- creating spaces
- hvac design and optimization
- property management - I had left the building I was responsible for in reasonable shape. But after 10 years of having my time completely absorbed, I had a lot to do.
- The pattern of my life for the last 5 years has been moving between construction consulting and developing a more formal set of software development skills
software development skills
- coursework
- portfolio development -deployed applications
- technology choices
- front end vs full stack
case study on reusability
reusability is the direction software development
- 'Each pattern is connected to certain "larger" patterns which come above it in the language; and to certain "smaller" patterns which come below it in the language. The pattern helps to complete those larger patterns which are "above" it, and is itself completed by those smaller patterns which are "below" it.'
- following the direction
- from jQuery to spaghetti
- I guess I am a following this direction. First Ajax and jQuery let me inject content into a webpage. Then the front-end became cool. HTML5 and and javascript became more powerful...But jQuery didn't solve everything:
jquery code sample/app
disp : function(idx){
var temp = this.arr[idx]['setpt'];
var timel = this.arr[idx]['clock'];
var timep = time2PM(timel);
var idx = this.arr[idx]['idx'];
newTite ='
<a href="#" >
</a>'+timep+' '+temp+' °
';
$(this.ulsel).append(newTite);
this.bindEdit($(this.lisel));
},
angular
- the ModelViewController pattern
- the magic of two way data binding
angular 2way example code/app the direction of angular
- from controllers to directives
- "Now we can summon our multiplication table in our templates by using <div multiplication-table instead of having to use ng-controller.
This is nice and glamorous, but we're still not any further into improving the quality of our code. We've just swapped one controller container for another and the HTML code is still out of whack." https://www.airpair.com/angularjs/posts/component-based-angularjs-directives directive code sample - authentication reusability on the back end problems with angular
- ng-everything or else
- digest cycle
- total rewrite
react
- states and props
- the flow of data
- imutability
- rxjs
react state code example react immutability example - props code example react components
- custom buttons
- component hierarchies
react component hierarchy angular component hierarchy -isonline a custom button a reusable button react and angular compare failing to implement the core concepts
- imutability
- rxjs
- observer pattern
- functional programming
conclusions
- Angular and react represent the move toward
take away