Sei sulla pagina 1di 17

10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript

http://javascriptissexy.com/ 1/17
Learn Meteor.js Properly
OCT. 9 This Year 45
(Learn Everything You Need to Know about Meteor)
At the end of this article, I outline two comprehensive study guides to help you learn
Meteor properly. The study guides are for both beginners and seasoned developers. The
first study guide, which uses a book, a paid screencast, and some free online resources,
teaches you how to build a sophisticated, modern social-media web application with
Meteor. And the second study guide, which uses only free resources (one affordable
screencast and free online resources), is just as instructive as the first, though you wont
build a specific web application throughout the course.
First, I give a comprehensive Meteor overview, in which I discuss just about everything
you want and need to know about Meteor before you commit to investing your time and
other resources in this still burgeoning though exceptional technology.
I estimate the study guides value may be equivalent to two years of college coursework.
In other words, if you complete either of the two study guides, you will learn so much
about modern web application development (be sure to Learn JavaScript Properly first)
that you will acquire a life-long and highly-valued skill; a skill you couldnt learn in most
colleges in two years. Yes, in just six days, you can become a qualified developer,
developing full applications, not just the front end or backend.
Time to read the Meteor Overview:
About 20 Minutes
m
e
n
u

10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 2/17
What You Will Learn in this Meteor Overview
I explain exactly what Meteor is, how it differs from typical JavaScript frameworks, what it
offers developers specifically, its alternatives and contemporaries, whether you should be
excited or skeptical about it, and where to find Meteor jobs. I also enumerate some of the
endorsements written by Meteor converts, and I explore the justifiable criticisms, known
limitations, and frequently asked questions that many have raised about Meteor. You will
learn all this and much more.
I am honored that you have joined me and I am hopeful you will find this article helpful
and illuminating and the accompanying study guides and recommended resources
sufficiently instructive. If you dont, then I would have failed and I would like to hear from
you; please notify me in the comments below. Dont hesitate to alert me of any
grammatical errors, typos, general errors, misinformation, missing information, outdated
content, or incomprehensible sentences or passages. You wont hurt my feelings, for I am
most interested in providing you accurate, clear, and comprehensible material, and only
you can determine whether I have done that.
Short on Time?
If you want to start the study guide (which I also refer to as a road map) straightway and
forgo the detailed Meteor overview, skip ahead to the road map now. But before you do,
look at the table of contents to see if any of the topics interest you.
eBook Version of this Blog Post
Download this article and the accompanying road map as an eBook (free of course): ePub,
Mobi, or PDF. (Check back on October 30th for the eBook.)
Learn Meteor Study Group
Tweet me or email me if you want to start a study group to learn Meteor properly. I will
announce your study group in this article and on Twitter.
Lets begin with a comprehensive overview of Meteor.
How Will Your Life Change After You Learn Meteor
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 3/17
Properly?
No, you wont be cleansed of your sins and washed of your immoralities after learning
Meteor properly. Neither will you lose five pounds nor grow two inches.
However, if you have never developed any kind of application before, you will
experience ecstasy, so powerful and liberating it will free you to envision, build, and
realize your imaginations, like an artist discovering paint and canvas for the first time.
If you currently use Meteor (and even if you have read a Meteor book or some tutorials),
you will emerge better equipped to understand and handle common Meteor errors and
the often-misunderstood Meteor magic, allowing you to experience Meteors true
efficacy. Efficient, productive, painless.
If you use Rails, Node.js, PHP, Django, Go, Scala, or Java, you will understand Meteorites
(i.e., Meteor developers) unapologetic praise for Meteor. You wouldnt be convinced that
every facet of Meteor is better than every facet of Rails or Django (it isnt) or that Meteor
will kill Rails or Python (it wont). But you will undoubtedly acknowledge and appreciate,
even if reluctantly, the efficiency and painlessness Meteor affords, as well as its
effectiveness in making you a more productive developerindeed, a happier developer.
But be careful, my friend, for even a faithful developer can be tempted by seduction, lured
by betterment, and give in to pleasure.
If you currently use proven but old-school technologies to develop applications, learning
Meteor properly will allow you to experience the current state of modern web application
development. This will prepare you for the foreboding robotic and futuristic frameworks
that will inevitably evolve out of technologies like Meteor. You will therefore become
familiar with the latest, experience the now, and embrace the inevitable.
Or, if after learning Meteor properly you remain unmoved, unconvinced, or unimpressed,
then we would love to hear from you. For you may have invaluable information about
efficient web-development tools that we can all use.
Continue Reading
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 4/17
Beautiful JavaScript: Easily Create Chainable
(Cascading) Methods for Expressiveness
AUG. 13 Last Year 21
(Part of the 12 Powerful JavaScript Tips Series)
Prerequisites:
Understand JavaScripts this With Ease
JavaScript Objects in Detail
Chaining Methods, also known as Cascading, refers to repeatedly calling one method
after another on an object, in one continuous line of code. This technique abounds in
jQuery and other JavaScript libraries, and it is even common in some JavaScript native
methods.
Writing code like this:
1 $("#wrapper").fadeOut().html("Welcome, Sir").fadeIn();
or this:
1 str.replace("k", "R").toUpperCase().substr(0,4);
is not just pleasurable and convenient but also succinct and intelligible. It allows us to
read code like a sentence, flowing gracefully across the page. It also frees us from the
monotonous, blocky structures we usually construct.
We will spend the next 20 minutes learning to create expressive code using this cascading
technique. To use cascading, we have to return this (the object we want subsequent
methods to operate on) in each method. Lets quickly learn the details and get back to
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 5/17
eating, or watching YouTube videos, or reading Hacker News, or working and browsing,
or working and focusing.
Lets create all of our chainable code within an object, along with a local data store.
Note that in a real-world app we will likely store the data in a database, but here we are
just saving it in a variable.
1 // The data store:
2 var usersData = [
3 {firstName:"tommy", lastName:"MalCom", email:"test@test.com", id:102},
4 {firstName:"Peter", lastName:"breCht", email:"test2@test2.com", id:103},
5 {firstName:"RoHan", lastName:"sahu", email:"test3@test3.com", id:104}
6 ];
7
8
9 // A quick utility function that does what it says:
10 function titleCaseName(str)
11 {
12
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).to
LowerCase();});
13 }
14
15
16 // Our object with the chainable methods
17 var userController = {
18
19 currentUser:"",
20
21 findUser:function (userEmail) {
22 var arrayLength = usersData.length, i;
23 for (i = arrayLength - 1; i >= 0; i--) {
24 if (usersData[i].email === userEmail) {
25 this.currentUser = usersData[i];
26 break;
27 }
28 }
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 6/17
29 return this;
30 },
31
32 formatName:function () {
33 if (this.currentUser) {
34
this.currentUser.fullName = titleCaseName (this.currentUser.firstName) + " " + titleCaseNa
me (this.currentUser.lastName);
35 }
36 return this;
37
38 },
39
40 createLayout:function () {
41 if (this.currentUser) {
42 this.currentUser.viewData = "<h2>Member: " + this.currentUser.fullName + "</h2>"
43
+ "<p>ID: " + this.currentUser.id + "</p>" + "<p>Email: " + this.currentUser.email + "</p>
";
44 }
45 return this;
46 },
47
48 displayUser:function () {
49 if (!this.currentUser) return;
50
51 $(".members-wrapper").append(this.currentUser.viewData);
52
53 }
54 };
With our chainable methods defined, we can now execute our expressive code like this
(just like it is done in jQuery):
Continue Reading
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 7/17
JavaScripts Apply, Call, and Bind Methods are
Essential for JavaScript Professionals
JULY. 10 Last Year 47
Prerequisite:
Understand JavaScripts this With Ease, and Master It.
JavaScript Objects
Understand JavaScript Closures
(This is an intermediate to advanced topic)
Duration: About 40 minutes.
Functions are objects in JavaScript, as we know well by now, and as objects, functions
have methods, including the powerful Apply, Call, and Bind methods. On the one hand,
Apply and Call are nearly identical and they are used frequently in JavaScript for
borrowing methods and explicitly for setting the this value. We also use Apply for
variable-arity functions.
On the other hand, we use Bind for setting the this value in methods, and for currying
functions.
We will discuss every scenario in which these three methods are used in JavaScript. While
Apply and Call are part of ECMAScript 3 (available on IE 6, 7, 8, and modern browsers),
ECMAScript 5 (available only on modern browsers) added the Bind method. These 3
Function methods are workhorses and sometimes you absolutely need one of them. Lets
begin with the Bind method.
Continue Reading
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 8/17
16 JavaScript Concepts JavaScript Professionals
Must Know Well
JULY. 9 Last Year 31
(Essential JavaScript Concepts for Modern JavaScript Development )
If you plan to work as JavaScript Professional, you must know some JavaScript concepts
and JavaScript-related web-development technologies, particularly as a modern
JavaScript developer. If you know the 16 concepts enumerated below, you have the skill
necessary to build world-class modern JavaScript web applications, and you are set for
the near future0 to 3 years.
I will expound on each of these sixteen concepts, and I am hopeful all of us will have
become better JavaScript programmers by the time we get through all of them. I have
completed most of the 16 concepts with just a few more to go, so keep reading and
learning. And sign up for the newsletter to get the latest updates.
I trust you have learned JavaScript properly or you already know JavaScript enough to
build a simple JavaScript-only web application. While the 16 concepts note below are
neither complex nor difficult, you will understand them best if you already know at least
some basic JavaScript.
The sixteen concepts that every modern JavaScript developer should know well follow:
1. JavaScript Objects in Detail
2. JavaScript Prototype in Plain, Detailed Language
3. JavaScript Variable Scope and Hoisting Explained
4. Understand JavaScript Closures With Ease
5. Understand JavaScript Callback (Higher-Order) Functions
6. Understand JavaScripts this With Clarity, and Master It
7. JavaScripts Apply, Call, and Bind Methods are Essential
8. Learn HTML5, CSS3, and Responsive WebSite Design
9. Object Oriented JavaScript (OOP in JavaScript)
10. Learn Node.js Completely and With Confidence Or Learn Meteor.js Properly
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 9/17
Continue Reading
Understand JavaScripts this With Clarity, and
Master It
JULY. 5 Last Year 71
(Also learn all the scenarios when this is most misunderstood.)
Prerequisite: A bit of JavaScript.
Duration: about 40 minutes.
The this keyword in JavaScript is notorious for confusing JavaScript developers. This
article aims to elucidate this in its entirety. Our goal: By the time we make it through this
article, this will be one part of JavaScript we will never have to worry about again. Also, we
will understand how to use this correctly in every scenario, including the ticklish situations
where it usually proves elusive.
We use this similar to the way we use pronouns in natural languages like English and
French. We write: John is running fast because he is trying to catch the train. Note the
use of the pronoun he. We could have written this: John is running fast because John is
trying to catch the train. We dont reuse John in this manner, for if we do, our family,
friends, and colleagues would abandon us. Yes, they would. In a similar aesthetic manner,
we use the this keyword as a shortcut, a referent to refer to an object.
1 var person = {
2 firstName: "Penelope",
3 lastName: "Barrymore",
4 fullName: function () {
5
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 10/17
// See how we use "this" here just like we used "he" in the example sentence?
6 console.log(this.firstName + " " + this.lastName);
7 // Well, we could have also written:
8 console.log(person.firstName + " " + person.lastName);
9 }
10 }
If we use person.firstName and person.lastName, as in the last example, our code
becomes ambiguous. Consider that there could be another global variable (that we might
or might not be aware of) with the name person. Then, references to person.firstName
could attempt to access the fistName property from the person global variable, and this
could lead to difficult-to-debug errors. So, we use the this keyword not only for
aesthetics (i.e., as a referent), but also for accuracy; its use actually makes our code more
unambiguous, just as the pronoun he made our sentence more clear. It tells us that we
are referring to the specific John at the beginning of the sentence.
Just like the pronoun he is used to refer to the antecedent (antecedent is the noun that
a pronoun refers to), the this keyword is similarly used to refer to an object that the
function (where this is used) is bound to. this not only refers to the object but it actually
contains the value of the object. Like the pronoun, this can be thought of as a shortcut (or
a reasonably unambiguous substitute) to refer back to the object in context (the
antecedent object, if you will allow me)more on context later.
JavaScripts this Keyword Basics
First, know that all functions in JavaScript have properties, just like objects have
properties. And when a function is executed, it gets the this propertya variable with the
value of the object that invokes the function where this is used.
this ALWAYS refers to (and holds the value of) an objecta singular objectand it is
usually used inside a function or a method, although it can be used outside a function in
the global scope. Note that when strict mode is being used, this holds the value of
undefined in global functions and in anonymous functions that are not bound to any
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 11/17
objects.
Continue Reading
Learn HTML5, CSS3, and Responsive WebSite
Design in One Go
MAY. 6 Last Year 52
(You will also learn HTML5 Boilerplate, Modernizr, and Twitter Bootstrap
3.0 responsive website layout)
Prerequisite: Familiarity with basic HTML and CSS
Duration: 2 3 days (about 18 hours)
We have learned quite a bit of JavaScript, but we must take a break from JavaScript briefly
and learn HTML5 and CSS3, because we need both, along with JavaScript of course, to
build modern web applications and websites.
Both CSS3 and HTML5 are just about fully supported in all modern browsers, and we
there are techniques in place to patch old browsers that lack support. So there is no
disadvantage to using CSS3 and HTML5 today. The opposite is true, however: there are
many painful, frustrating disadvantages with forgoing HTML5 and CSS3.
You may already know a bit of HTML5 and a touch of CSS3 (or perhaps you probably
know enough old-school HTML and CSS), and with this knowledge, you might have
thought you neednt learn HTML5 and CSS3 fully.
The crux of the matter is that after you complete this course, you will make faster, more
user friendly, highly adaptive websites and web applications. And you will learn a number
of other very exciting modern web development techniques.
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 12/17
Responsive Web Design is becoming increasingly essential (we are probably a few
months away from responsive being mandatory) with the ubiquity of the myriad screen
sizes available today. As a result, modern web developers are expected to understand
and implement responsive web designs.
What You Will Learn?
HTML5 Core (HTML5 semantics, video, and audio; and later, Advanced HTML5 APIs)
Responsive Web Design (create fluid, responsive layouts from scratch and from
static, pixel based layouts; responsive images, icons, and videos; and more)
Tools and Strategies for Designing the user interface and static comps for
responsive websites
HTML5 Boilerplate, Modernizr, and Initializr
Twitter Bootstrap 3.0 Responsive Layout and Best Practices
Continue Reading
OOP In JavaScript: What You NEED to Know
MARCH. 19 Last Year 151
(Object Oriented JavaScript: Only Two Techniques Matter)
Prerequisite:
JavaScript Objects in Detail
JavaScript Prototype
Object Oriented Programming (OOP) refers to using self-contained pieces of code to
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 13/17
develop applications. We call these self-contained pieces of code objects, better known
as Classes in most OOP programming languages and Functions in JavaScript. We use
objects as building blocks for our applications. Building applications with objects allows
us to adopt some valuable techniques, namely, Inheritance (objects can inherit features
from other objects), Polymorphism (objects can share the same interfacehow they are
accessed and usedwhile their underlying implementation of the interface may differ),
and Encapsulation (each object is responsible for specific tasks).
In this article, we are concerned only with Inheritance and Encapsulation since only these
two concepts apply to OOP in JavaScript, particularly because, in JavaScript, objects can
encapsulate functionalities and inherit methods and properties from other objects.
Accordingly, in the rest of the article, I discuss everything you need to know about using
objects in JavaScript in an object oriented mannerwith inheritance and encapsulation
to easily reuse code and abstract functionalities into specialized objects. We will focus on
only the best two techniques for implementing OOP in JavaScript. Indeed, many
techniques exist for implementing OOP in JavaScript, but rather than evaluate each, I
choose to focus on the two best techniques: the best technique for creating objects with
specialized functionalities (aka Encapsulation) and the best technique for reusing code
(aka Inheritance). By best I mean the most apt, the most efficient, the most robust.
Continue Reading
Understand JavaScript Callback Functions and Use
Them
MARCH. 4 Last Year 74
(Learn JavaScript Higher-order FunctionsCallback Functions)
1
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 14/17
In JavaScript, functions are first-class objects, which means functions can be used in a
first-class manner like objects, since they are in fact objects themselves: They can be
stored in variables, passed as arguments to functions, created within functions, and
returned from functions [1].
Because functions are first-class objects, we can use callback functions in JavaScript. In the
rest of this article we will learn everything about callback functions. Callback functions are
probably the most widely used functional programming technique in JavaScript, and they
are literally in just about every piece of JavaScript and jQuery code, yet they are a mystery
to many JavaScript developers. You will know how to use them after reading this article.
Callback functions are derived from a programming paradigm called functional
programming. At a simple and fundamental level, functional programming is the use of
functions as arguments. Functional programming wasand still is, though to a much
lesser extent todayseen as an esoteric technique of specially trained, master
programmers.
Fortunately, the techniques of functional programming have been elucidated so mere
mortals like you and I can understand and use them with ease. One of the chief
techniques in functional programming is that of callback functions. As you will read
shortly, implementing callback functions is as easy as passing regular variables as
arguments to functions. This technique is so easy that I wonder why it is usually covered
only in advanced JavaScript topics.
Continue Reading
Learn Intermediate and Advanced JavaScript
FEB. 25 Last Year 19
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 15/17
(Learn Intermediate and Advanced JavaScript Concepts and Techniques in
2 Weeks)
Prerequisite:
You have completed this course: Learn JavaScript Properly (For NON-JavaScript
programmers and First-time Programmers)
Or you already know the following JavaScript concepts well:
Simple Data Types, Reference Types, Operators, and Objects (in Detail)
Variable Scope and Hoisting, Expressions, Statements, and JSON
DOM, The Window Object, JavaScript Events, and Handling Errors
Functions, Function Properties, Function Expression, and AJAX
Basic Regular Expressions and Modules
Duration:
2 Weeks
I submit to you an instructive course on intermediate and advanced JavaScript. The skills
you will learn in this course of study will free you from the constrains of using the limited
JS techniques you have been using to develop JS applications, and they will give you new
insights and new techniquesa Jedis temperament and statureto program JS
applications with ease, efficiency, and preciseness.
If you are new to JavaScript and you are an experienced programmer in another langauge
such as Java, Python, ActionScript, Rails, and PHP, it is important that you learn JavaScript
properly. JavaScript has many idiosyncracies and uncommon concepts that you must
know well before you follow this Intermediate to Advanced JavaScript course.
Continue Reading
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 16/17
How to Learn JavaScript Properly
FEB. 24 Last Year 466
Learn JavaScript Properly (For NON-JavaScript Programmers and First-
time Programmers)
Duration: 6 to 8 weeks.
Prerequisite: Completed at least some high school (no programming experience
necessary).
Continue course below.
New New Update (January 7, 2014):
A new study group has just started on Reddit:
January 2014, Learn JavaScript Study Group on Reddit
Note that there is also a Reddit-based study group, amongst others noted in the
comments below. But these other groups have all started months ago.
This course outline gives you a structured and instructive roadmap on how to learn
JavaScript properly and thoroughly, from absolute beginner to attainment.
You do want to learn JavaScript; it is why you are here, and you have made a wise
decision, for if you want to develop modern websites and web applications (including an
internet startup), you need to know JavaScript. And while there are more than enough
online resources to teach you JavaScript, finding the most efficient and beneficial method
to learn the language of the web is not easy and could be frustrating.
It is worth noting that unlike just a couple of years ago when you needed to know a true
server-side language (such as PHP, Rails, Java, Python, or Perl) to develop scalable,
dynamic, database-driven web applications, today you can do as much and more with
JavaScript alone.
Continue Reading
10/25/2014 JavaScript is Sexy | Learn modern web application development with JavaScript
http://javascriptissexy.com/ 17/17
Copyright 2014 JavaScript is Sexy About Contact Archive

Potrebbero piacerti anche