Monthly Archives: August 2013

Building Web Applications for the Future Browser with AngularJS — Learning AngularJS Notes

Choosing to use AngularJS for a new web application is not just as choosing another JavaScript framework. AngularJS is moving towards to a new browser standard. Angular embraces HTML, CSS, and JavaScript. Since most of these technologies are for static documents, Angular extends the vocabulary of these technologies for dynamic documents. It is what HTML would have been, had it been built for dynamic content.

There is a notion of Angular 3D: Directives, Data binding, and Dependency injection.

Directives

Through the concept of directive Angular turns HTML into DSL, Domain Specific Language. Directives are a way to teach HTML new tricks, make custom components, and simplify DOM manipulation. During DOM compilation directives are matched against the HTML and _executed_. This allows directives to register behavior, or transform the DOM. Directives are unique to Angular.

Figure 1 Ways to invoke directives

Figure 1 Ways to invoke directives

Figure 2 HTML could be verbose, web components are cleaner

Figure 2 HTML could be verbose, web components are cleaner

Figure 3 Reusable components will become the browser native implementation

Figure 3 Reusable components will become the browser native implementation

Data Binding

Data-binding in Angular web application is the automatic synchronization of data between the model and view components. Model binds to the view in single directional manor or form in bi-directional manor. Model is the single-source-of-truth in the application. You don’t query the DOM, you don’t update the DOM, you don’t talk to the DOM, DOM just happens to be the projection on the current model. The model is the truth. If you want to read the current state of the form, you go to the model, if you want to change the current state of the form, simply go to the model and update the model.

Figure 4 AngularJS Data Binding Structure

Figure 4 AngularJS Data Binding Structure

Figure 5 AngularJS Model, View, Controller

Figure 5 AngularJS Model, View, Controller

Figure 6 Model Driven View Will Become Future Browser Standard

Figure 6 Model Driven View Will Become Future Browser Standard

As Miško Hevery mentioned in “Re-Imagining the Browser with AngularJS”, the data binding should really be part of the browser and Angular team has been working on a spec called model driven view and a child spec called object observe. They are trying to bring the native implementation of data binding into the browser and browser should embrace data binding.

Dependency Injection

Dependency Injection is a core to Angular. DI allows less code and more extensibility. Angular DI is the key to making easily testable components.

Figure 7 $provider service is responsible for telling Angular how to create new injectable things

Figure 7 $provider service is responsible for telling Angular how to create new injectable things

Figure 8 $injector is responsible for actually creating instances of the services using the code provided via $provide

Figure 8 $injector is responsible for actually creating instances of the services using the code provided via $provide

Each AngularJS application has a single $injector that gets created when the application first starts; you can get a hold of it by injecting $injector into any injectable function. Any time you write a function that takes injected arguments, you’re seeing the injector at work.

There Are More Important Angular Concepts

Module, controller, scope, factory, filter, compile, link, route, promises, unit-testing, e2e=testing, watching on variables, notes on each individual concept are coming…

AngularJS is very comprehensive. Even though the team building it is small with only 6 people, the core people Miško Hevery (father of AngularJS), Vojta Jina (creator of Karma), and Igor Minar (team leader, Continuous Integration Testing or CI guy) are great visionaries. Choosing AngularJS to build the new web application = preparing for the future standards.

The web is moving towards a data driven architecture, where browsers are responsible for dynamic rending and two way data binding. This tweet from John Whish: “I’m pretty sure that HTML6 is going under the cod ename Angular JS” is not rootless.

Great Links to Get Started with AngularJS

What do you think is the greatest opportunity women have to make a difference in the technology industry?

This era presents women with great opportunities in many fields. The technology industry in particular presents an exciting time for women to enter. The greatest opportunity, us, women have to make a difference in the technology industry is to use our careers to make a positive social and environmental impact in our workplace and the community. This requires confidence, involvement, self-esteem, and great sense of responsibility.

Throughout my career in the technology industry, I found that a good education and a solid knowledge foundation provided me with the great confidence to take on any challenges. I also found that learning is a lifelong process and developing a passion for learning could help me keep up with what we do.

I started from an electrical engineering background, and had programmed industrial robots and many other control systems. Opportunities brought me to the land of web as a web developer. Since I am a passionate learner and always enjoy challenges, I picked up all the state-of-the-art technologies by free online resources, having discussions with experts, and sharing ideas with people.

Last summer my group experienced a serious application performance issue. After worked with the key technical people and some community experts, the conclusion was that the issue was caused by a Microsoft framework limitation. I wasn’t satisfied by leaving the issue unsolved, so I spent my free time to continuously research, eventually figured out a good solution.

Another time a Microsoft framework bug prevented our well d­­­esigned code from functioning. Microsoft documentation and the framework experts couldn’t explain why. Although I had my workaround, the puzzle lingered in my mind and couldn’t go away. I had dug deeper and finally found out that one part of the Microsoft framework misinterpreted names for a specific data type and those names were not recognized by the other part of their framework.

I could go on with these stories about women doing great things in the technology industry, because they happen every day. Even though the stories can be small compared to those big difference makers’, together they have shown that confidence, involvement, self-esteem, and great sense of responsibility helped to make a difference in these small worlds. Technology has not been discriminatory to women. Technology is gender-blind and only cares for results. Who we are and what we are biologically deemed is not a variable in our codes; only our knowledge and passion are. Women can be as competent as men in solving problems in the technology industry, and we are.

Life shrinks and expands in proportion to one’s courage. As long as we are confident, involved, and responsible with great self-esteem, women can equally help to move the technology industry forward. Women can also make significant differences in the world.

Toastmasters Icebreaker Speech — revised

As a software engineer, I enjoy programming and problem solving with great vigor. If I had to count the years of programming that I have done since school, it would be around 30 now. And I know I could never have enough of it! In fact, I am constantly fascinated by the ever-developing new technologies and I am proud to say that I have been able to keep myself on the cutting edge.

I was born and grew up in Beijing during the Great Culture Revolution. Since my father worked for the official China Foreign Languages Publication and Distribution agency, we lived in a community with many well-known translators and language experts. In the vicinity there were also many famous research institutions and engineering organizations. We were surrounded by intellectuals. The schools I went to were very academic centric unlike most of the other schools at the time which were hardly teaching any true knowledge. From a young age I developed good study habits. The conscientious and diligent old Chinese professionals had left a deep impression on me which I have carried along throughout my life.

Before I entered high school, universities in China were reopened. My academic record provided me an opportunity to go directly to university studying foreign language. I knew language and culture wouldn’t fulfill my entire inquiring mind, so I went to a magnet high school where I found math and physics were extremely exciting. The challenge and puzzle-like nature of the fields made me determined to study electrical engineering and mathematics later in college.

I remember my first computer course in college was titled “Z80 Microprocessor” and my first programming language was Z80 assembly language. I could never forget how thrilled I was the first time I built a functional control board with just a few chips and some electronic components, and I could even program it! Soon after, I picked up BASIC, Pascal, FORTRAN, and C programming languages. I enjoyed my time programming on the mainframes in computer rooms as well as the time making real time control systems using single board computers on those long workbenches. The more I learned, the thirstier I became for it. I subsequently finished my EE master’s degree research on a robotic control system. The actual robot was controlled by a Z80 single board control system. My simulation program was written in FORTRAN 77 and run on PDP 11.

In 1993, a UC Berkeley math Ph.D. was attracted by my math skills and he hired me as a professional programmer to write 2D and 3D AutoCAD drawing programs. Since then I became exposed to a myriad of flavorful commercial programs, from C, DB IV, LISP, and 8086 assembly language, to Visual C++; from CAD drawing, industrial robots and many other real time embedded control systems, to Windows GUI components; my programs had changed from solely problem solvers or command executors  to a series of presentations. In early 2002 I landed on the web platforms where I have found more rooms to express myself through the web pages I delivered as well as the “poems” I coded in computer languages. I have devoted my full attention to every single challenge I encountered, no matter how big or how small.

Programming demands precision, programming involves research. Programming is presenting. Programming is also communicating. Although I have got both the depth and breadth of programming knowledge and experience, I have found there is always an immeasurable room to explore in this mind-paradise. I feel I have certainly grown into a true passionate programmer.

Toastmasters Icebreaker Speech

As a software engineer, I enjoy programming and problem solving with great vigor. If I add the number of years that I programmed at school, I’ve programmed for thirty years and yet I have never felt bored. Indeed, I am fascinated by new programming techniques that are still being created and I can’t stop myself from learning.

I was born and grew up in Beijing during the Great Revolution years. Due to the fact that my father worked for a government foreign language publishing agency, we lived in a community with translators for various languages, most of them were very well known. Close by, there were many big government research institutions and engineering organizations. So the district was full of intellectuals. The schools I went to were still academic centric even though most of the schools were not teaching real knowledge at the time. I developed good study habits and had always been a good student.

Before I entered high school, universities in China were reopened and the entrance exam was launched. I was recommended to go to Beijing Foreign Language University (today’s Beijing Foreign Studies University). I didn’t feel I would want to be a translator nor a diplomat, plus my parents didn’t think I was mature enough to be a college student, so I went to a magnet high school focusing on math and science. When it came to the time to choose a college, there was a serious fight between me and my parents. I was recommended to go to a top science and technology university in China. My parents were concerned that I could lose my Beijing residential certificate with the choice, they insisted that I should choose a college in Beijing, preferably Beijing University Library and Information Science Department. I lost the fight no matter how hard I fought. The result was that the only thing I could choose was what I studied.

I went to a poly-technic university under the jurisdiction of the Beijing Municipal Government to study electrical engineering as well as mathematics. My first computer course was titled “Z80 Microprocessor” and my first programming language was Z80 assembly language. I remember how excited I was the first time I built a functional control board with just a few chips and some electronic components! Soon after, I picked up BASIC, Pascal, FORTRAN, and C programming languages. I enjoyed my time programming on the mainframes in computer rooms as well as the time making real time control systems using single board computers on those long workbenches. The more I learned, the more the thirst for knowledge broiled. I can’t remember how many nights I spent in the labs or computer rooms without any sleep. I then finished my EE master’s degree research on a robotic control system. The actual robot was controlled by a Z80 single board control system. The simulation program used FORTRAN 77 on PDP 11.

In 1993, a UC Berkeley’s math Ph.D. was attracted by my math skill and he hired me as a professional programmer to write 2D and 3D AutoCAD drawing programs. Since then I became exposed to myriad of flavorful commercial programs, from C, DB IV, LISP, 8086 assembly language, to Visual C++, from engineering drawing, industrial robots and many other real time embedded control systems, to Windows GUI components, I really enjoyed them all. Fortunately I landed on the web platforms in early 2002 where I always longed for more. I feel so happy each time I learn something new!

Because I do indeed enjoy logic thinking, I found myself so lucky to have both the depth and breadth of programming knowledge and experience. I feel that I have certainly grown into a true passionate programmer.