Compare reusable components in react and angular in current projects
From Wiki2
compare reusable components in react and angular in current projects
script
- reusable components - Good Morning. I have always been intrigued by repeatable patterns and reusable components. It started when I was building houses
- construction - I ran a construction company for twenty some years. For fourteen of those years I built new houses on vacant city lots for first time homeowners. Typically we would build a dozen houses at a time.
- construction toolkit - Some styles repeated. So I wanted to automate the process. I would create a 3D wireframe from a set of architects plans...
- software development - and then I would write software. Here you see some AutoCad Lisp code that inserts floor joists into a 3D model. I could extract the vector data from the drawing and send it to a database to create stocklists and cut lists. Then I could print views of whatever we were building and hand them to the crew.
- education and research - In 1998 I closed my business and went to college. I got a physics degree and then got funded to do graduate work. I worked mostly on memory and learning and pattern recognition and did a little bit on audition.
- research and software - We built models of how the brain worked, coded them in MatLab and then tried them out on big datasets. In our models a sensory input would be represented by a feature vector. We would feed this into neural network. This little bit of code is using a feature vector to train the neural net. This I think is from a supervised learning model that gets trained up and then tries to recognize inputs it hasn't seen before.
- education and research - I got involved in this big NSF grant related to learning. We were tasked with updating the way we teach based on what we now know on how the brain works. I started to going into classrooms and I really liked it. I got job in a new Boston public high school where every student had a laptop.
- software and teaching - There was no curriculum and there was no software and no servers. I joined a team writing a Humanities curriculum and spent Friday evenings with a group of teachers hacking together servers and hosting Moodles and forums and wikis and writing code. We adapted platforms for the classroom and leveraged what was already out there. Here is an example of a qick and dirty interface to a script that I used to inject content into student workspaces.
- scraping code - Here is a little script that takes a file of words and sends them to a dictionary and returns a list of words with their definitions. I'd use that on the the class wiki, as material for a smartboard quiz or export it to the quizlet site.
- consulting - After six years the laptops were old, the school closed down and the new school decided to reserve their new macbooks for standardized test prep. So I went back to freelancing, and renovating the three decker where my kids were born. It had been 11 years since I had done anything on it so I had a lot of projects in the pipeline. I did some construction related consulting as well.
- improving software skills - Meanwhile I decided to round out my software development skills. By this point I had taken an undergraduate degree worth of computer science classes but I was intrigued by the rising power of the front-end and the idea of ReSTFUL API's, Agile and test-driven development.
- case study on reusable components - Sorry, it was a bit of a long intro to my topic. Here is that quote again. I am intrigued by reusability and components on the front-end.
- demo http://boggedbuses.sitebuilt.net - Here is google.maps as an example of a component. I used it in a city of Boston hackathon on making the city work better. It uses the MBTA bus data feed to show where the buses are slowing down at different points during the day.
- the limits of jQuery - I started out on the front-end with jQuery. jQuery sometimes muddies up the relationships. Here if you look at the HTML you see there is an unordered list but you have no idea what's in that list. You have to dive deep into the javascript to find the relationships.
Andy asked me the other day how the program knew which zone it was operating on. I was like 'hold on just a sec'. It was a long second.
- demo http://hvac.sitebuilt.net Here is one zone of the heating system and here is that list of zones that is rendered deep in the javascript. So yeah..its just an index.
- angularJS =I started with Angular since it had a lot of Buzz. Big Meetup groups and lots of MEAN job listings. I began to follow the Angular way.
- code for 2way data binding= Here is an example of 2way data-binding. You click a button on one page and automatically a list is repopulated on another page. You click in the span at the top of the page and it changes the default list which changes activeList and the list at the bottom gets repopulated without you having to tell it to.
- demo http://stuff2get.sitebuilt.net
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
- "the heart of the pattern—which describes the field of physical and social relationships which are required to solve the stated problem, in the stated context."
<ul id="rooms" class="current" data-role="listview" data-inset="true" data-filter="false">
</ul>
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 =' <li data-ti="'+idx+'" data-timl="'+timel+'" data-temp="'+temp+'"><a href="#" ><img src="img/icons/pencil.png" title="edit" height="20px" width="20px"/></a><span>'+timep+' </span><span>'+temp+' °</span></li>';
$(this.ulsel).append(newTite);
this.bindEdit($(this.lisel));
},
- In fact sometimes jQuery muddied up the relationships, obfuscated the pattern. What you see here is the code that produces the items in http://hvac.sitebuilt.net. Just looking at the HTML you have no idea what is going on. You have to dive deep into the javascript to find the relationships. Here is the method on the object that creates the HTML to show this.
Angular JS
- the Model View Controller pattern
- the magic of two way data binding
I started with Angular since it had a lot of Buzz. Big Meetup groups and lots of MEAN job listings. I have done a little with KnockoutJS and I found with Angular I didn't have to concern myself with mapping from JSON to the DOM. It just did it for me As long as I followed the 'Angular Way' everything was fine.
angular 2way example code/app http://stuff2get.sitebuilt.net
the direction of angular
- "Now we can summon our multiplication table in our templates by using 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
- from controllers to directives
- Cengage Learning hosts the Angular meetup. They are all excited about using directives to ecapsulate javascript and HTML into something that looks a lot like a web component. It can be styled and pick up the company-wide look and feel. And you can drop them in wherever you need them. here are a couple that I actually reuse.
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
