candy day
Agenda
1. Yeoman
2. CoffeeScript
3. AngularJS
YEOMAN
- Lightning-fast scaffolding
- Automatically compile CoffeeScript & Compass
- Automatically lint your scripts
- Built-in preview server
- Awesome Image Optimization
- AppCache manifest generation
- Killer build process
- Integrated package management
- PhantomJS Unit Testing
yeoman search
Yays
Why coffeescript
BUT Why?
- CoffeeScript is the #11 most popular language on GitHub
- syntactic sugar for javascript
- CoffeeScript compiles to pretty awesome Javascript.
- Readability: CS resolved most of javascript syntax problems
- no global variable problem
- Less Complex OO
WHy not?
- have to install Node, npm
- extra compilation step
- not compatible with existing js - need in mind translaiton
- Ruby/Python like syntax (not a con for Rubyists)
FUN things
- Lexical Scoping and Variable Safety
- If, Else, Unless, and Conditional Assignment
- Splats...
- Loops and Comprehensions
- Array Slicing and Splicing with Ranges
- Everything is an Expression (at least, as much as possible)
- Operators and Aliases
- The Existential Operator
- String Interpolation, Block Strings, and Block Comments ...... and more
Superheroic JavaScript MVW* framework**
*what is MVW
** works best with TODO list apps
What is MVW?
Having said, I'd rather see developers build kick-ass apps that
are well-designed and follow separation of concerns, than see them waste
time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you".
An Introductory Angular Example
The Zen of Angular
- It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code.
- It is a really, really good idea to regard app testing as equal in importance to app writing. Testing difficulty is dramatically affected by the way the code is structured.
- It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
- It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.
- It is always good to make common tasks trivial and difficult tasks possible.
The Zen of Angular
- Registering callbacks
- Manipulating HTML DOM programmatically
- Marshaling data to and from the UI
- Writing tons of initialization code just to get started
Conceptual Overview - startup
CONCEPTUAL OVERVIew - Runtime
Conceptual Overview - SCOPE
scope can be seen as the glue which allows the template, model and controller to work together and
conceptual overview - controller
Controller is the code behind the view
conceptual overview - model
model is the data which is used merged with the template to produce the view
conceptual overview - view
- In Angular, the view is a projection of the model through the HTML template
- The view is what the users sees. The view begins its life as a template, it is merged with the model and finally rendered into the browser DOM
conceptual overview - Directives
- Angular teaches the browser new syntax through a construct we call directives
- Directive is a behavior which should be triggered when specific HTML constructs are encountered in compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
Conceptual overview - filters
- Filters perform data transformation roles. Typically they are used in conjunction with the locale to format the data in locale specific output.
Key concepts
Two-way Data Binding
Web Components
Dependency Injection
Data Binding in Classical Template Systems
Data Binding in Angular Templates
Web Components AKA directives
- Invoking directives from HTML
- Compilation process, and directive matching
- String interpolation it's also directive
- Compile/link separation
Dependency injection
dependency injection helps to make your web apps both well-structured (e.g., separate components for presentation, data, and control) and loosely coupled (dependencies between components are not resolved by the components themselves, but by the DI subsystem)
Where can I use DI?
- DI in controllers
- Factory methods
Others worth to mention
-
Angular expression
is a JavaScript-like code snippet that is evaluated by Angular in the context of the current model scope, rather than within the scope of the global context (window).
- Angular modules solve the problem of removing global state from the application and provide a way of configuring the injector
- Services are long lived objects in your applications that are available across controllers
- Factory methods are responsible for creating most objects in Angular. Examples are directives, services, and filters
API Roadshow
- modules [ng, ngMock, AUTO, ngCookies, ngMockE2E, ngResource, ngSanitize]
- directives
- filters
- services
- global APIs
TESTing
- Testacular - Spectacular Test Runner for JavaScript.
- unit test might be written using any testing framework; Jasmine is our choice
- E2E testing module ngScenario
Summary
- AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
- Angular teaches the browser new syntax through a construct we call directives
- Web components and two-way data binding are unique feature and will be natively implemented in Chrome and might become web standards
candyday
By marcin
candyday
- 322