Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Modern Web Tools

No description
by

Michael Jo

on 19 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Modern Web Tools

Modern Web Tools
AngularJS
AngularJS
Javascript user vs. Javascript developer
Function as values
Declarative Function
http://eloquentjavascript.net/03_functions.html
Filters, Directives, Templates
Two-way Data Binding
Controller, Routing, Factory, Service

What does this means?
Single Page Application (SPA) is a valid option for you to consider in your next project.
Propose whenever you identify an opportunity - Cloud in mind.
Enhancing existing applications - plugins Java, .NET
The guide document will be available.
Stay current. Technology is changing fast.
Java Group
More internal technical training sessions
Prototypes in the Cloud
Proxy configuration for NPM and Git

Javascript
Popular - http://githut.info/
Client-side vs. Server-side
DOM manipulation -> Front end -> Server side
Library vs. Framework
Library
Collection of functions
Your code is in charge and calls library. E.g. jQuery
Frameworks
A particular implementation of web app.
Your code fills in the details and it calls your code when it needs something app specific.
Agenda
Javascript & Frameworks

Web Tools

Putting it together - Demo

How is it relevant to me as a developer?
Node.js & NPM
Node.js
Server-side Javascript runtime environment
Comes with a library
Yeoman Workflow
Create a new webapp => handle dependencies => preview, test, build


Tutorial: http://yeoman.io/codelab/
Web Tools
Task Runners - build system for the web
Grunt - Configuration over Code
Gulp - Code over Configuration
Tasks
CSS task - compiling Less or Sass, Minification, Concatenation
Javascript - JSHint, Concatenation, Ugfication (minification + mangling)
Image, Watch, Testing, Deployment task
Both tools do the same thing.

Package Manager for the Web - Bower
Web App Scaffolding - Yo
Yeoman - workflow with the scaffolding tool (yo), the build tool (Grunt, Gulp, etc) and the package manager (like Bower and npm).

Test
Jasmine - behavior driven development framework for JavaScript
"describe" function to group tests
"it" function to define individual tests

Karma - JavaScript based command line tool
Spawn a web server to load source code
Execute your tests in the browser

angular-mocks - Inject and mock Angular Services within unit tests
Executes synchronously
$httpBackend mock XHR request
Objective
To understand Modern Web Tools
To give you an idea how they work together
To discuss how to start using these
Expectation
Based on my own view & opinion
Keep it highlevel, but enough to understand
Resources
https://github.com/mjtoolbox/poc2
https://github.com/mjtoolbox/poc3
Javascript Frameworks - http://todomvc.com/
Building Modern Web - https://prezi.com/3n9iarfmurnk/building-modern-web-applications-using-angularjs/
Bootstrap
AngularJS Architecture
http://getbootstrap.com/getting-started/
Bootstrap
Responsive design framework - mobile first
Cross-browser compatibility
Increase productivity
Community support
NPM - Node Package Manager
Manages ecosystem of node modules / packages
Global vs. Local
CSS Preprocessors
CSS Preprocessors
Less
Sass (Syntactically Awesome Style Sheet)
Thank you for coming.

More technical L & L sessions are coming from Architecture team:
Cloud (Azure), IoT.

Stay tuned.
Deep Linking
Hyperlink that specifies a link to a searchable or indexed piece of web content.
http://demos.telerik.com/kendo-ui/websushi/

https://builtwith.angularjs.org/
Simple application demo
Demo
Full transcript