powerful tools for building web solutions
Post on 18-Jul-2015
72 Views
Preview:
TRANSCRIPT
POWERFUL TOOLS FOR BUILDING WEB SOLUTIONSSASS, X2JS, TypeScript, Javascript REPLs, Node.js, Internet Browsers, OSS, HTTP Proxies, Color Palette Management, Web fonts, CSS new features, CSS Auto Prefixing
AndreaTino
#allrightsreserved #2015 #creativecommons #cc4.0 #attribution #noncommercial #sharealike #international
Who is this presentation for?
Everyone with a minimal background
on web programming
What topics does it cover?
See previous slide :)
Oh yeah... But how detailed?
Just a rapid look at those technologies, the rest is up to you!
JAVASCRIPT AND CSS ARE WEB’S ASSEMBLYThe world is moving in a certain direction where
Javascript and CSS are not really used for developing the web today.
1.1
C#’s creator on C#
“Forget about C#... Javascript is the future”
TypeScript
http://www.typescriptlang.org
CoffeeScript
http://coffeescript.org
A developer on CSS
“CSS is the worst thing ever created”
New abstractionsDo you remember when we used to develop websites using HTML and Javascript? Well, today you should write not a single line of Javascript anymore.
Why? Because Javascript allows too many things, too many hacks. It is also a non typed language, thus it introduces very few restrictions. It means that there is not much control when a Javascript program is executed.
X2JS So we created new languages which compile into Javascript. There are many of them out there: TypeScript, CoffeeScript, LiveScript also functional languages.
Same for CSS CSS sort of shares the same destiny of Javascript but for a slightly different reason: CSS has no limits and can scale to extremely chaotic sets of overridden rules.
There is need for more consistency and structure.
CONSTRAINTS NEEDEDMy thoughts on this.
1.1.2
Me
“X2JS and X2CSS are today’s attempt to provide Semantics to two technologies (Javascript and
CSS) that can act as the Assembly language of our current
applications’ platform: the Web”
Setting limitsThese new languages popping up on the Internet every new day are a clear representatoion of what the community is seeking: restrictions!
To make things more neat and less chaotic, we need to add constraints to our programming experience.
X2JS Languages compiled into Javascript use OOP and types to confine the extreme flexibility of Javascript.
X2CSS Languages compiling into CSS provide a better syntax structure to specify selectors and create selectors hierarchies for a less chaotic styling.
My thoughts on thisTHE WORLD AROUND JAVASCRIPTTools for a better Javascript development experience
2
DISCOVERING TYPESCRIPTMicrosoft’s solution for a better Javascript
programming experience by C#’s creator: Anders Hejlsberg
2.1
NPM install
npm i -g typescript
Playground
http://www.typescriptlang.org/Playground
Handbook
http://www.typescriptlang.org/Handbook
TYPE SUPPORT VARIANT TYPE
GENERICS INTERFACES
EXCEPTIONS LAMBDA EXPR
MODULES TYPE INFERENCE
DECL. MERGING INHERITANCE
POLYMORPHISM NODE.JS READY
Like C#TypeScript is sort of inspired to C#, after all both languages have the same father :)
The programming experience is very intuitive and can be seen like a very advanced ActionScript with full support for OOP and its principles: Encapsulation, Inheritance and Polymorphism.
JAVASCRIPT REPL(S)Most common places to write your Javascript hacks
and try your experiments.
2.2
REPL.IT
http://repl.it/languages/JavaScript
JS Bin
http://jsbin.com
JS Fiddle
https://jsfiddle.net
Script on your browserA REPL (Read, Eval, Print, Loop) is sort of a shell available on web. There are many of them supporting many different languages.
JS Bin This is by all means my favorite. It allows you to create Javascript hacks and save them in your free account. You can also share them.
JS Fiddle Probably one of the very first Javascript REPLs on the web it offers the possibility to integrate your code with almost all Javascript libraries out there (possibility to select version!).
Reple It This is an amazing tool for REPLing all languages. It supports Javascript but also Node.js and many other languages. It is like having a platforms with all languages you might need.
BROWSER JAVASCRIPT CONSOLE APIDebugging Javascript can be hard, but browsers
developed many tools for developers.
2.3
Chrome’s console API ref.
http://developer.chrome.com/devtools/docs/commandline-api
IE’s console API ref.
http://msdn.microsoft.com/en-us/library/ie/hh772173%28v=vs.85%29.aspx
Firefox’s console API ref.
http://developer.mozilla.org/en-US/docs/Tools/Browser_Console
Accessing the consoleAlthought there is no W3C recommendations or specification on this, all browsers implement a Javascript API that allows developers to debug their web applications.
Element selectors Commands for getting elements in the DOM. XPath is also supported in some browsers.
Object inspection Commands for accessing objects and their properties. Some browsers allow serialization to and from XML/JSON as well.
Event inspection Commands for listing active event handlers on objects and handle them.
Monitoring Commands for observing objects’ state and trigger callbacks when something occurs or changes.
MUTATION OBSERVERS (EX EVENTS)Debugging sometimes can be painful in Javascript, especially with large projects. However a black-box
approach is possible
2.4
W3C DOM Specification
http://www.w3.org/TR/dom
MDN - Mutation Observer API
http://developer.mozilla.org/en/docs/Web/API/MutationObserver
Observing changesThis is a functionality introduced in still draft DOM4 W3C specification and replaces old Mutation Events API. It is design for development, but this feature can be actually pretty handy when debugging large Javascript projects with many lines of code.
Trigger when something changes Usage is quite straightforward: An object is provided (must be Node in the DOM) and an observer is created by providing also the list of changes to listen to (like Sensitivity Lists in VHDL). When one of these changes occur, the observer will execute the callback provided.
Better debug It is a good functionality when trying to figure out what side effects some components are introducing in the DOM.
PROFILING JAVASCRIPTWhat the user experiences is all the Javascript in your
browser (except turnarounds due to http non-AJAX reqs), thus profiling your JS is good practice!
2.5
IE’s memory profiler
http://msdn.microsoft.com/en-us/library/ie/dn255003%28v=vs.85%29.aspxChrome’s Flame Chart
http://developer.chrome.com/devtools/docs/cpu-profiling
Modern browsers have very nice tools for profiling web applications and discover slow components in order to enhance them or take reasonable action.
Chrome: function deepChrome has a very interesting functionality: the Flame Chart in the “Profiles” section. It allows programmers to visually identify which functions are executing for a long time
IE: find memory leaksIE delivers the Memory Profiler as part of its F12 developer tool. It enabes the possibility to take snapshots and, thus, it is very good, among the other things, for locating memory leaks.
EVENT AWARENESSIn large applications, handling events is
important as they trigger events when in the capture phase and also when bubbling.
2.6
IE’s memory profiler
http://msdn.microsoft.com/en-us/library/ie/dn255003%28v=vs.85%29.aspx
Events can be like little lizards moving everywhere, keeping track of them is crucial!
Browsers themselves offer some solutions, however some external tools can be handy.
SpryMedia Visual EventThis lightweight and extremely easy-to-use tool lets you visually identify which events an element in the DOM has subscribed to.
Different types As it is possible to use jQuery and other ways to subscribe to events, Visual Event is able to recognize which method the developer used to subscribe to events for a specific element.
Chrome’s event monitor ref.
http://developer.chrome.com/devtools/docs/console#monitoring-events
Console API: event monitorChrome and other browsers, as part of the console API, offers the possibility to monitor events.
monitorEvents(document.body,”click”);
unmonitorEvents(document.body);
monitorEvents(document.body);
TRACKING EVENTS: DIYInstead of using external tools and libraries doing
magic, you can develop easily a way to track events in every web application.
2.6.2
<head> ... <script src=”...”></script> <script src=”mylib.js”></script></head>
1. Define the libraryCreate a separate js file and put there the function. This file must be included as LAST library in your web application.
2. Override subscriptionOverride event subscription functions.
HTMLElement.prototype.addEventListener = function(type,listener,useCapture) {...};HTMLElement.prototype.removeEventListener = function(type,listener,useCapture) {...};
3. Implement logging logicLog everytime the event traverses an element.
// Attention: Pseudo-Code!
var log = function(fun) {...}
function(type,listener,uc) { this.oldAEL(type,function(){log(fun)},uc); for (ancenstor in this.ancestors) { ancestor.oldAEL(type,log,uc); }};
TODO
My thoughts on thisTOWARDS A BETTER STYLING EXPERIENCEWhat the world out there can offer to improve styling
web applications with CSS
3
DISCOVERING SASS AND LESSA very useful tool to create better CSS stylesheets
without the chaos of CSS.
3.1
SASS
http://sass-lang.com
LESS
http://lesscss.org
SASS Playground
http://sassmeister.com/
SASS vs LESS
https://css-tricks.com/sass-vs-less/
LESS Playground
http://lesscssismore.com
Higher level CSSSASS Syntactically Awesome StyleSheets provides developers with a more structured language. Sadly is that it cannot be installed through NPM :(
gem install sass
LESS aka Less CSS. Same as SASS but with some different features and slightly different syntax. Ah, it is NPM ready :)
npm install -g less
GOOD COND. STRUCT.BETTER SYNTAX
BETTER CSS OUTPUT BETTER DOC
TOWARDS OBJECT ORIENTED CSSOO principles applied to CSS or what?
3.2
:( :)
OOCSShttp://www.smashingmagazine.co
m/2011/12/12/an-introduction-to-object-oriented-css-oocss/
Writing better CSS
.button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc;}.box { width: 400px; height: 100px; border: solid 1px #000; background-color: #fff;}.widget { width: 500px; height: 200px; border: solid 1px #ccc; background-color: #fce;}
Avoid duplication Like in OOP, it is good to act by the principle of less possible redundancy.
.button { width: 200px; height: 50px;}.box { width: 400px; height: 100px;}.widget { width: 500px; height: 200px;}
Separate concerns Identify what’s specific to each object and remove non-specific rules.
:) .skin { padding: 10px; border: solid 1px #ccc; background-color: #efe;}.button.skin { background-color: inherit;}
Use methods Use common rules changing with context.
.box.skin { padding: 0; border-color: #000; background-color: #fff;}.widget.skin { padding: 0; background-color: #fce;}
CRAZY PREFIXING SOLVEDOne of the most annoying things about CSS is that
many features arenot fully implemented by browsers, many rules have prefixes, this makes CSS ugly!
3.3
MDN
https://developer.mozilla.org/en-US/docs/Web/CSS
Autoprefixer
https://github.com/postcss/autoprefixer
Playground
http://jsbin.com/gufoko/
Playground
http://pleeease.io/play
Should I prefix?How can I know whether a CSS rule should be prefixed or not? Use MDN, search the CSS rule and find the Browser Compatibility matrix!
Or better do it automaticallyThere are some tools which perform auto-prefixing on your CSS sylesheets. These can be used on your CSS, SASS, Stylus or even LESS files.
Autoprefixer Very efficient and fast tool.
SASS
Pleeease
http://pleeease.io
Pleeease Flexible and does everything.
npm install -g autoprefixer
LESS STYLUSnpm install -g pleeease-cli
MANAGE YOUR COLOR PALETTESVery important tools for UX designers to style web
applications and keep color palettes always in order.
3.4
Adobe Color CC
https://color.adobe.com/
Color Hex
http://www.color-hex.com/
For professionalsAdobe sure delivers amazing applications for designers and Color CC (formerly knows as Kuler) is one of these.
Not so advanced ones...Other solutions which are not as good as Adobe’s but provide a very good level of color palette handling in the Cloud.
COLOR RULES
SHARINGFROM IMAGE
COLOR WHEEL
Color-Hex This provides basic features.
ColourLovers
http://www.colourlovers.com/
Color-Hex This provides basic features.
PATTERNS
My thoughts on thisIMPROVING PRODUCTIVITYA miscellaneous of tools on the Web to improve
development experience in general
4
INSPECT HTTP COMMUNICATIONSWhen developing web applications, AJAX calls are
something more than common (especially in SPAs), some tools can help you see what’s going on the channel.
4.1
Telerik Fiddler
http://www.telerik.com/fiddler
SERVER
127.0.0.1:80
CLIENT
Browser
Debugging AJAX callsWeb applications will naturally send and receive information with the server. AJAX calls are also quite a common thing, but sometimes we need to debug data and having a look at what’s going on on the channel is a very good thing to have!
Fiddler By Telerik, it is one of the most used HTTP proxy and sniffer. It has many capabilities ad can be customized using a programming language.
JSCRIPT PRGRMMBLE
REVERSE PROXY
CUSTOM RULES
DISCOVERING ADOBE EDGE ANIMATECreating Javascript based animations with a timeline
based tool is like having Adobe Flash... without the need of the SWF Player :)
4.2
Adobe Edge Animate
https://creative.adobe.com/products/animate
Animating like in FlashI started developing Flash presentations when Flash was still Macromedia’s (5.0). Now unfortunately the market has moved away from it, but with Edge Animate it is still possible to have the same authoring experience, and this is awesome!
width:
height:
x:
y:
Timeline based animation design is a very effective way to create animations.
Javascript The very nice thing of Animate is that the output is a bunch of Javascript, CSS and HTML files.
Adobe guarantees that animations are cross browser :)
DOES MY BROWSER SUPPORT IT?The most popular tool to discover which browser is
implementing whatever feature.
4.3
Can I Use?
http://caniuse.com/HTML5 Test
https://html5test.com/
Can I Use?Does Chrome fully support multiple columns? Does IE support CSS animations? Yes? What about IE10? And FireFox? Opera?
All those questions can have an answer by simply using CanIUse!
Always updates CanIUse is always updated with latest info about support of standards by browsers. Some tools even use CanIUse to keep their database updated.
HTML5 TestSupport for newly come HTML5 features can be something important to keep in track. The nice thing of HTML5Test is that you will not be presented with a support matrix, the tool will run a set of tests on your browser and give you results for that specific version!
Other browsers The tool also offers the possibility to evaluate other browsers and even compare support!
My thoughts on thisDEVELOPING CROSS PLATFORM HYBRID APPSToday’s most popular tools for creating apps on
different stores with the same code base
5
THE WORLD AROUND HYBRID APPSThe main actors on the stage of cross platform apps
5.1
Cordova
https://cordova.apache.org/
Hybrid app
Developed in HTML + CSS + JS mostly
PhoneGap
http://phonegap.com
Appium
http://appium.io/
Selenium
http://www.seleniumhq.org/
HTML5 + CSS + JS
Supported platforms’ SDKshttps://developer.android.
com/sdk/index.htmlhttps://developer.apple.c
om/xcode/
Specialization
Used to develop
HOW AN HYBRID APP IS BUILTOnce upon a time...
5.2
WebView
Native app
Webview
A mini-browser hosted by apps
From web applicationsHybrid apps basically originate from web applications. The process simply consists in considering a web applications and then building apps which embody a Webview connecting to the same server to download the HTML content.
Tooling Cordova, while generating the apps, will also include libraries to handle communications between the native layer and the webview.
WHAT CORDOVA DOESActually, nothing so somplicated.
5.3
Android Webview
webkit.WebView
iOS Webview
UIView::UIWebView
Win Webview
WebView
Unix
Android
MacOS
Android
iOS
Windows
Android
Win
Creating an appCordova will generate a very simple app consisting in a Canvas element together with a WebView element on top covering all the screen.
Since the app to build is always the same, instead of having developers do that, Cordova automates this process.
npm install -g cordova
HOW TO CREATE APPS WITH CORDOVAFrom command line, just a few commands and there you
can go.
5.3.2
For Windows
cordova prepare windowscordova compile windows
For Android
cordova prepare androidcordova compile android
For iOS
cordova prepare ioscordova compile ios
Win output
myapp.appx
Android output
myapp.apk
iOS output
myapp.ipa
Configuration
package.json
config.xml
top related