Tag Archives: experience

jquery-conference

jQueryConf.in Experience

Update 1: Photos are now available at Google +

Quick Summary:
jQueryConf.in was an amazing conference where you met interesting front end developers from India, and there were amazing speakers and sessions.
A long blog post about the first international jQuery conference in India.

About jQueryConf.in:

jQueryconf.in is the first official jQuery conference in India organised by the jQuery Foundation in Bangalore from July 23rd – 25th.
This is my interactive blog post about all the speaker sessions that I attended, please feel free add your own experiences below in the comments.

jQuery Conf: Day 1:

The jQuery Foundation. More than just jQuery

. by (Kris Borchers)

Proposal
Summary: The jQuery Foundation is always working toward making the web accessible to everyone through our efforts in open source projects, standards and the web community. This talk will highlight many of the efforts we are currently focussed on and we’ll also dive into some of the projects we’ve been working on with the community to give you an idea of current outcomes of those efforts and demonstrate some of the uses of those projects. Though jQuery and its related projects are still important to the web, this talk will focus more on the other efforts the jQuery Foundation is involved in that many may not know about.

jQuery Foundation

Notes:
- Executive Director of jQuery Foundation
- kris@jquery.com , @kborchers
- RedHat, js lead
- day-to-day business, developer time
- high level governance over projects, copyright, all projects are open-source and free to use
- CLA, Infrastructurem, Legal, Marketing, Financial Support
- jQuery.3.0 > release blog
- jQuery User Interface
- jQuery Mobile.
- Sizzle: Css Selector Engine
- QUnit: js unit testing
Common Reporter Interface
- PEP: Pointer Events
Automate and improve W3C tests
- Chassis: Initial CSS Framework
- Esprima:
Javascript parser, AST, to understand whats going on in your js code.
Improved Testing and Workflow.
Instanbul, JSCS, Structured JS.
Khan Academy
ESTree

- Globalize:
Format, Vocal, Language, TimeZones
less code for i18n and l18n
Runtine optimization

New Projects:
Standards:
very academic, and are not in trenches and dont really
force standards that help developers and not academics
Developer / Practioner Voice

W3C:
All Working Groups, all overt the place for standardization.

ECMA:
TC-39,
ECMA-402, -> Globalization.
2 representations to leverage jQuery and where the language is headed.

World Wide Events:
Organizes in US as well in other countries in the world.

Where we are headed:
Needs and priorities.
Diversity:
Developers, Projects, Governance.
Accessiblity:
Physical, Cognitive,
Tools and Awareness
Education:

How is the JQuery foundation involved with Node ?
Unifies world of javascript.
Lots of crossover.

Definite Timelines for jQuery Mobile ot jQuery?
, no public timelines as they are depending upon volunteers.

Are they are going to create and support hybrid apps frameworks?
yes they are interested, Scott seems so.
jQuery UI has been working with Intel for integration in their SDK.

Diversity and programs in schools ? underrepresented groups including age.
From Schools.
University Partners, programming club. age is an important factor.
more doors open up.

A great talk focussed on telling jQuery Foundation is not just about jQuery

Infra and Security ?
Faced DDoS Attack and defaced, Cloudfare to mitigate them. Only 3 people working for 20 servers.

Browsers are willing to discuss changes, Safari has been amazing to talk to.
Browser Vendors, Bugs.
Little bit of work to implement new standards.

Welcome Talk by Naresh

:

Welcome Talk

Networking.
Basic Networking
Law of 2 feet.
No feedback forms
Volunteer.
jQUery plugin Author
Someone who does not

Notes:

> Grunt: A Bitovi case study. (Alexis Abril)

Proposal
Summary: Grunt is a popular tool used to help development teams script tasks of all types together in an easy to use, repetitive process. In this session we will show you how we use Grunt at Bitovi to develop and deploy large, maintainable, testable applications.

Bitovi Case Study
Grunt-js

Grunt. canjs

- Caters to FEDs
- No need to rebuild everything,

Useful-

Canjs -> Distributed packages

Test Suite:
jshint, build, tests

Buiid:
AMD, Steal, Global
version numbers,
banner information.

Documentations:

4434 total tests Example

Simple
Testee grunt task

Test Driving a jQuery plugin.

(Naresh Jain)

Proposal
Summary: Over the past decade, eXtreme Programming practices like Test-Driven Development (TDD), Behavior Driven Developer (BDD), Refactoring and Continuous Integration have fundamentally changed software development processes and inherently how engineers work. Practitioners claim that it has helped them significantly improve their development speed, design quality and responsiveness to changing requirements. Software professionals across the board, from Internet startups to medical device companies to space research organizations, today have embraced these practices. But can these practices be applied to front-end development? Especially jQuery plugin development?

Test Driven Development

This demo will show how we can test drive a jQuery plugin with the help of various patterns, strategies, tools and techniques. Participants will understand how they can apply this approach for testing any jQuery code.

Basic Setup
Comments jQUery plugin with in confengine.com
TDD
Test, Code, Refactor
Break any passing tests.
Starting out with jQComments().
Jasmine + Jasmine-jquery tests.

Aap ki Adalat with jQuery Foundation

Summary: Aap Ki Adalat is the longest running talk show in the history of Indian television. In this show, the anchor, Mr. Rajat Sharma has grilled over 500 personalities on various sensitive and personal issues. We would like to put the key members of the jQuery Foundation through a similar session, where participants will ask them hard questions around various technical and non-technical choices made by the Foundation and the future direction of the foundation.

Aap ki Adalat
Aap ki Adalat

- Why $ instead of free and open source jquery plugins >
> extends from prototype

- Why add `this` another 4th option that is plugin option ?
> this -> DOM element

- Javascript and DOM ? jQuery Confused?
> People were already confused. It was not better and worse.

- Plugins become a trainwreck, because of version management in plugins.
> Can’t control the plugins, just use the most maintained.

- rating and ranking problem of jQuery plugins.

- until something is better, people are getting encouraging to.

- Promise based programmiing for Common A Patterns for jQuery.
> Error Handling.

- Why support for IE6/7/8. Why still support.
Still getting used for Internet Explorer.

- Use Feature detection instead of Browser detection

- requestAnimFrame in the next frame, web animations. jQuery.animation()

- what would you change in jQuery in time machine ?

- TypeScript and Ecmascript 6 not used in jQuery 3.0

How I become a better Front End Developer by maintaining a daily jQuery plugins site. Jay Kanakiya.

Front End Developer

Summary: Maintaining a jQuery plugins website is hard but equally rewarding. In this talk I am going to outline some of the initial difficulties I have faced and its corresponding learnings. jquer.in also played an important role into how I become a Front End Developer. Even now it plays a huge role into improving my writing skills, coding skills, contacts.

Slides

Went great !

Performance beyond Page Load.

(Apoorv Saxena)

CKrtt38UMAAXZqk

Everything related to performance

:Importance
- Engagement reduced in Facebook from 60fps to 30fps in EdgeCond 2015.
- you have got 16ms (10ms) to render a particular frame
right from javascript to css,
- janky web applications before.
- Rendering Performances.
Js -> Styles -> Layout -> Paint -> Composite.

Layout:
Paint: Pixel is positioned to a different location.
Different css properties trigger different changes

Composting:

Tools:
– FPS Meter. (60) … chrome devtoolss
– Timeline as in
– Show Paint rectangles.

Smooth Scrolling, Smooth Animations, Smooth Interactions

Process that consumes more than 16ms:
– Time consuming, e.g. Garbage Collection
– Javascriptt trigger operations, eg. Layout Thrashing
– Loads of repainting on screen, reason can be attributed to both js/css/both
– Triggering any other operation that can cause the animation to exceed its frame budget.
– Synchronous operations inside the event handler that exceeds the current budget frame

Best Practices:
– Avoid Memory Leaks,
– delete models and views at the same time.
– Reducing DOM Calls., reading and writing,
– Use requestAnimation frame or fastdom for batch reads and writes.
Debounce input handles, ajax calls, scrolling, clicks
– Use GPU Acceleration, use css
Flipboard case study for canvas animation for hardware acceleration.
– CSS Animation.
– Web Animations API to the rescue
– Gifs and Performances. > image does not animate out of view.
– position: fixed elements getting repainted on every scroll
will-change: transformed
– Union of damaged regions: browser tries to optimize it causing a bigger position to get repainted.

Proposal
Summary: In today’s responsive world, user experience and application performance is becoming more important than ever. Jankiness is a thing of the past, though it still haunts many web applications, let’s under the working of jQuery code so that it doesn’t haunt your web application.

Building up the Community.

Scott Gonzales.

Scott Gonzales
Building up the community

A no slides talk from Scott Gonzales who currently serves at the jQuery UI Lead Foundation, about the importance of the community.
The key takeways from this talk were:-

– Start contributing to something early on, if you find a bug report it.
That also counts as contributing.

– jQuery UI has been working on a lot of amazing things and when they see any problem, they try to abstract it or diverge it other projects as well.
This is the reason for launching Sizzle, Chassis and Globalize.

– Every small bug that you report or patch that you sent affect other people who dont even know about it and helps to push the web forward.

– India has got such a huge number of developer and abysmal support for open source contributions. Lets Fix this. You should not follow SDD.
(Stack Overflow driven development)

– Many times, you see a bug in a library, you send a patch to that library but you find that is actually depending on another framework which is dependent on another more base library. Example will-change

So, you send 3 pull requests, hopefully it gets merged in all of them, you don’t only benefit the users of the earlier library but you just added another core feature to the underlying that have exponentially benefitted much more users.

Proposal
Summary: Over the past seven years, jQuery UI has identified and solved many common problems for web developers. Often times, the problems don’t apply just to users of jQuery UI, or even jQuery Core. In these cases, we try to solve the problem in the best way for the largest audience, rather than creating an isolated solution within jQuery UI. We’re able to do this by working with the community and bringing together various groups to collaborate on solutions. In this talk, I’ll discuss how this concept is at the heart of the jQuery Foundation and explain some of the projects that have been born out of jQuery UI.

Day 2:

Don’t make this jQuery mistakes.

Dave Methvin

Proposal

Dont Make this jQuery Mistakes

Summary:

You can find solutions to thousands of jQuery problems on the Internet in blog posts, StackOverflow answers, or on Github. The problem is, many of those answers and code snippets are very obsolete! The web development world of 2006 that jQuery was born into is very different than the world of 2015, and jQuery has evolved to keep up. Yet there are still features inside of jQuery that only remain because of compatibility concerns, not because they’re a good idea in modern web development.

This talk will discuss features of jQuery that are best to avoid if you want a fast web site or HTML app that works with the widest range of browsers–even browsers that haven’t yet been released! You’ll also learn how using some of these features can make it very hard to follow modern practices such as Responsive Design. For each feature, you’ll learn the modern 2015 way to do each of these tasks.

Lead Developer for jQuery Core Project.

- careful in the case of power
- jQuery has evolved in the next 10 years
- Change means break
code / plugins / programming habits /
First result may not be correct anymore.
Compromise:
jQuery Migrate: what methodbs are not supported.
Mistakes to fix from the console.
- jQuery 3.0
Deferreds are Promise / A+ compatible:
Added Error Handling.
must use .catch() on a Promise Chain

Bad:
Best sites are there, but are not maintained.
Freezed at 1.11.1
Never use jquery-latest anymore.

.live
performance issue and doesn’t work reliably for Apple Mobile

– Best to avoid :visible and :hidden
– Don’t use classes for strictly js-related state, store state in classes
– Use data-attributes to avoid forced layout().
– Instead of $(elem).show() use $(elem).addClass(‘show’);

– Always use .error
– Preferably don’t use ajaxSetup. , handled globally bad
If you are writing a plugin around ajax, use all the overriding options
– Use a wrapper over $.ajax

– Contructor $, takes in a lot of things.

– use
`this.checked, this.id, this.className, this.disabled` preferably for reading.
instead of jQuery Selectors,

– Custom Selectors slow things down.
There are many selector equivalents most of the time that are much faster.

A sip of React-js.

(Prathamesh Sonpatki)

React-js

Proposal
Summary: React JS challenges lot of conventional ideas in web development at the same time providing a simple model for web development. Lets start rethinking with components, virtual DOM, JSX and see how React really shines! In this talk we will take whirlwind tour of React JS.

We will be building an application based on Open Library API which will help us cover core features of React. At the end of session, we will have a complete app built using React.

Links:http://bit.ly/sip-of-reactjs
Presentation: https://speakerdeck.com/chaitanya/sip-of-reactjs

- React Build UI. limited of scope.
- “Its what I want, how I want”
- Declarative, depends upon state at all times.
- large applications is based on small testable, bite-sized particles.

** Resuable **
** Composable **
** Seperation of concerns **
** Components can be reused on a per-project basis. **

** You can use any other javascript library with react **

** Not html but jsx **

jsx converts html to normal react code + (Optional)

No Templates.

How to manage data:

“`
Data changing over time is root of all evil
“`
> Use props, parameters

> Parent to Child Communication.
> One way data flow

> Child to Parent
> pass in functions defined in parent to child.

> propTypes, validations for props for external people using the api.
“`
booka: Proper types of errors, React.PropTypes.array.isRequired
“`
> State, internal

( on click on a link in a presentation, you can do git checkout, then open up your text editor)

> State Change -> call render()

> Refresh Page x -> Refresh Component.

> If Refresh Component, refreshes each and every Child Component
Virtual DOM,
only get the diff,
and make minimal set of changes.
do the batch updates

> Component LifeCycle Hooks like:
componentWillMount
componentDidMount
componentWillReceiveProps

Good Patterns:

> Avoid state as much as possible
Only add things that going to change.
Prefer props over state

> Use Dumb Components

> Learning Curve
> Small, just javascript
> Easy to sneak into existing projects

> First Experiment to Use,

> Huge Apps, use Flux to communicate between React Apps.

> Seperation on concerns for all logic, ajax calls, single responsibility.

JSON-LD. Making every object matter in Semantic Web.

Janardhan Revuru

wpid-img_20150725_112511.jpg

Proposal
Summary: Over the period, web has transformed itself from ‘Document oriented’ (web pages) to ‘Data oriented’ (sections, objects) to now Semantic. As conceived by the visionary (Tim-Berners Lee), Web 3.0 is the Semantic Web. And, Linked-Data is the first step towards it. Though the concept of Semantic web existed for long, the developers are still grappling with right usage. In the current context of voice assistants like ‘Google Now’ and ‘Siri’, linked data is essential for better context aware user experience.

In the process of creating exceptional user experience, learn how semantic data helps during phases of information architecture, user interaction and UI design.

Notes:
Linked Data e.g. Google Now.
Metadata, microdata, microformats
Semantics,