Update 1: Photos are now available at Google +
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.
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)
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.
- Executive Director of jQuery Foundation
- firstname.lastname@example.org , @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
Improved Testing and Workflow.
Instanbul, JSCS, Structured JS.
Format, Vocal, Language, TimeZones
less code for i18n and l18n
very academic, and are not in trenches and dont really
force standards that help developers and not academics
Developer / Practioner Voice
All Working Groups, all overt the place for standardization.
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.
Developers, Projects, Governance.
Tools and Awareness
How is the JQuery foundation involved with Node ?
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.
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
Law of 2 feet.
No feedback forms
jQUery plugin Author
Someone who does not
> Grunt: A Bitovi case study. (Alexis Abril)
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.
- Caters to FEDs
- No need to rebuild everything,
Canjs -> Distributed packages
jshint, build, tests
AMD, Steal, Global
4434 total tests Example
Testee grunt task
Test Driving a jQuery plugin.
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?
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.
Comments jQUery plugin with in confengine.com
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.
- 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
> 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.
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.
Went great !
Performance beyond Page Load.
Everything related to performance
- Engagement reduced in Facebook from 60fps to 30fps in EdgeCond 2015.
- you have got 16ms (10ms) to render a particular frame
- janky web applications before.
- Rendering Performances.
Js -> Styles -> Layout -> Paint -> Composite.
Paint: Pixel is positioned to a different location.
Different css properties trigger different changes
– 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
– 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
– 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
– Union of damaged regions: browser tries to optimize it causing a bigger position to get repainted.
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.
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.
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.
Don’t make this jQuery mistakes.
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.
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
Best sites are there, but are not maintained.
Freezed at 1.11.1
Never use jquery-latest anymore.
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.
`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.
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.
- 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. **
** Not html but jsx **
jsx converts html to normal react code + (Optional)
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
only get the diff,
and make minimal set of changes.
do the batch updates
> Component LifeCycle Hooks like:
> Avoid state as much as possible
Only add things that going to change.
Prefer props over state
> Use Dumb Components
> Learning Curve
> 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.
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.
Linked Data e.g. Google Now.
Metadata, microdata, microformats
Why is React functional.
John. K. Paul
Summary: We all know that React works, but being functional implies so much more than the typical dictionary definition would imply. Using React and Om as an example, I’d like to walk you through some tenets of functional programming. A win much bigger than the words ‘virtual dom’ exists in React, and through my examples, you’ll see what makes reasoning about functional systems such a treat.
> Buzzwords: Functional Programming / Virtual DOM
paradigm shift in functional programming
Should you use React-js ?
Like asking for medicines before asking for the problem.
> Use a small part in your application, in angular-js or ember-js
> Fast to learn then backbone / angularjs
> See the metrics before and after using React-js
> Still a POC
> Isomorphic, runs on server-side + client-side
Questions answered by Darcy Clarke, Dave Methlin, John.K.Paul, Alexis.
Mostly it was a quick discussion around libraries, frameworks, where are we headed, what are good practices, bad practices
Real World WebRTC.
Summary: WebRTC provides APIs for webcam access and P2P video/voice/data that finally give us the power to create a new calibre of web applications. However, WebRTC is not a shining unicorn just yet – there are complications when it comes to browser support, supporting mobile devices, supporting networks that can’t do P2P, and more that need to be overcome. In this talk I will show you how to create a real world, stable, and highly scalable WebRTC application as well as review some of the basics behind how WebRTC works under the hood.
Included: fun demos, real production code, horror stories from our WebRTC company.
Note: Eric SchoffStall is the creator of Grunt.
WebRTC is almost supported by all the browsers, but the crucial pain points in adoption of WebRTC is Safari and Internet Explorer.
Safari runs on 45% of all mobile devices and there has been no official or unoffical word from Apple regarding the support of WebRTC.
Internet Explorer will be supporting the WebRTC 1.1
Initially it had a lot of pain points in 2012, but as it progressed browser vendors started quashing them one by one.
Advantages include that it is
Doesn’t require a central server similar to Skype.
Some awesome real world examples of WebRTC:
Conference Calling: By being P2P
WebTorrent: WebRTC to quickly and speedily transfer comments.
instant.io: Using WebRTC to transfer files
PeerCDN: Using the concept of WebRTC to deliver faster experiences on the web and falling back to CDN.
People have done a lot of work and released open source projects on WebRTC to help other developers.
– cordova plugin
– adapter-js, works smoothly on safari as well.
Some awesome ideas that were thrown:
Can WebRTC for faster YouTube buffering ? If someone in your area has already viewed the video, why can’t you just utilize it directly.
I belive, if this is implemented we can fasterly get rid of youtube buffers.
He is currently working on his app:
Charmer, similar to Tinder dating app, only you can instead of videos there are small gifs, and once matched, you can have a quick date over WebRTC on your cellphone.
Lastly, Eric is going to release Wildfire as an open-source project using which anyone can easily integrate WebRTC in the client and the server.