-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathAngular, The Big Picture=Joe Eames;Note=Erxin.txt
197 lines (127 loc) · 5.64 KB
/
Angular, The Big Picture=Joe Eames;Note=Erxin.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
Angular, The Big Picture=Joe Eames;Note=Erxin
# Introduction
- angular high level overview
- plunker, plnkr.co, it is a web development sandbox tool
# Anglar benefits and features
- code reduction
- two way binding
- accesibility and internationalization
- popularity
- testability, design intest in mind support both unit with ngMock and end to end function testing, protractor which developed by angular team. Karma is a tool for run all your test in all browser at the same time
# Angular architecture
- html compiler
- detecting changes and digest
- dependency injection
# Complementary technologies
- html compiler
html
\body
\ button
\ h1
angular get loaded -> process compile the html -> looking for DOM node with a special attribute ng-app -> looking for ng-controller attributes -> read the controller code and load the code -> find other ng-* attribute and template {{}} -> process directive, combine display and logic into same component. this could be done with custom html elements
+ example
<html ng-app>
<body ng-controller>
<button ng-click/>
<h1>{{title}}</h1>
<user-info/> //custom html for directive
</body>
</html>
- change detection - rudimentary
+ standard framework in previous days
component.render()
var user = {name:'value'}
var frameworkUser = framework.wrapData(user);
...
frameworkUser.name.set('new-value');
+ angular use dirty checking
click -> digest if any of the data is changed -> dirty check
data request
-> re-render
- dependency injection
function add(arg1, arg2){...}
function getData($http){...}
angular will get the $http component for the getData function. built-in service is start with $, we could register our service and let angular automatic inject our service instance
# Complementary technologies
- introduction
- jquery, versed, angular have minimal version of jquery, angular also supports using full version if any page reference full version of jquery
if some directive need to manipulate the dom then jquery is a good option
- ionic, turn angular turn to native app
+ no specialized skills
+ built on phonegap
+ reduced costs, hybird app
+ ionic is easy to learn
- karma and protractor build by angular team to testing angular app
+ karma built on node
used for unit tests, for test javascript
file watcher, will rerun the test
multiple browsers
framework agnostic
fast, run test in milinseconds
+ protractor, run your code inside page, end to end testing. protractor built on the web driver
add a good interface for web driver
- summary
# Angular Gotchas and Problems
- browser compatibility, IE
6 & 7, 1.0 & 1.1
8 1.2 or earlier
9 1.3 & later
- external events & the digest cycle
event -> digest cycle of angular -> angular don't have native handle events html5 video, sockets, 3 party codes, non-angular custom code to solve this we need to create custom directives to listen to these events and manually trigger digest for angular to update the views
- problems some projects will encounter
- SEO, search engine optimization
use client-side rendering, most search engine will not find content from angular side
google will try to run javascript during indexing.
render portions of site on server. use server side technology for the content that worth rendering.
use prerenderer to create static pages, this will take time to maintain and optimize
- performance
unnecessary and cost for maximize of performance
never prematurely optimized
+ performance caused in angular
too many bindings
use fewer bindings
remove unshowed bindings from page and add them when they displayed
change user experience
use one time bindings insead of use two way bindings
use a different rendering engine, there are other rendering engine, such as react with angular. other like handlebars
angular + react = speed but this will add unnecessary development processes
- very large code bases. bytes send cross the wire need time then these will required times. use lazy loading code
+ these are lazy load libraries
ocLazyLoad
Overmind
# Angular vs. X
- introduction
- server-side rendering
+ advantages
+ disadvantages
- jquery & vanilla javascript
+ fits edge cases better
+ cost high, magnitude higher
+ sanity
+ desirability is low, few people want to learn someone else's homegrown framework
- older mvc frameworks, focus on backbones
+ backbones
your product is already written in these kinds of framework
+ angular have more features than these framework
+ stagnation
- ember and other modern mvc frameworks
+ highly opinionated, ember is a very full-featured framework
+ angular is the most popular framework, performance is good
- react, created by facebook team
+ performance is good
+ browser support is good
+ less popularity than angular
+ suffer from frankenstein framework which means react is not a full feature framework which required integrate routers etc features into react. react is only a render engine
- summary
# The Future of Angular
- introduction
- the future of angular 1
new tech lead for angular 1
frequent releases for angular 1
- the future of angular 2
release a new route for angular 2 is released to angular 1 too. there will be a nature shift from angular 1 to angular 2
performance improvement
simplifed conceptual model
mobile friendly
design for es6/es7 support & web standards integration
- conclusion