PyJS intro

36
PyJs [email protected] Monday, September 19, 11

description

PyJS is a CommonJS Based Javascript Framework runs on Browser

Transcript of PyJS intro

Page 2: PyJS intro

A CommonJS Based Javascript Framework

runs on Browser

https://github.com/demix/pyjs

Monday, September 19, 11

Page 3: PyJS intro

CommonJS

Monday, September 19, 11

Page 4: PyJS intro

Math.js

increment.js

program.js(main)

Monday, September 19, 11

Page 5: PyJS intro

Benifits

Monday, September 19, 11

Page 6: PyJS intro

One code , runs everywhere

No need to study and follow an ugly module pattern

Automatic namespace

Monday, September 19, 11

Page 7: PyJS intro

Browser

Server

Desktop

Command line tools

...

Monday, September 19, 11

Page 8: PyJS intro

One code , runs everywhere

No need to study and follow an ugly module pattern

Automatic namespace

Monday, September 19, 11

Page 9: PyJS intro

Traditional Module Pattern

CommonJS Module

Monday, September 19, 11

Page 10: PyJS intro

One code , runs everywhere

No need to study and follow an ugly module pattern

Automatic namespace

Monday, September 19, 11

Page 11: PyJS intro

Monday, September 19, 11

Page 12: PyJS intro

Server side Example:

NodeJS

Browser side Example:

Firefox jetpack project

Examples

Monday, September 19, 11

Page 13: PyJS intro

Problem

Monday, September 19, 11

Page 14: PyJS intro

Run directly after ‘require’.No Callback.

Monday, September 19, 11

Page 15: PyJS intro

Means in Browser, we can only use

“Synchronous”

request to get the script file.

Monday, September 19, 11

Page 16: PyJS intro

What’s the fxxk...

Monday, September 19, 11

Page 17: PyJS intro

SeaJS

Monday, September 19, 11

Page 18: PyJS intro

Monday, September 19, 11

Page 19: PyJS intro

User pre-defined template wrapper.

Prefetch Js file which has been required.

How it works

Monday, September 19, 11

Page 20: PyJS intro

Problems

Still ugly template.

Still can’t download all files in parallel

Monday, September 19, 11

Page 21: PyJS intro

PyJS

Monday, September 19, 11

Page 22: PyJS intro

Grammar

Monday, September 19, 11

Page 23: PyJS intro

99% same as CommonJS API

No ugly user pre-defined template wrapper

Monday, September 19, 11

Page 24: PyJS intro

what about the file loading problem?

You haven’t mentioned it ..

Monday, September 19, 11

Page 25: PyJS intro

There is two loading rules in PyJS.

One in local debugging,

the other in online building.

All need Python environment.

Monday, September 19, 11

Page 26: PyJS intro

python pyjs.py runserver

Fetch the JS file in synchronous XHR request.

Server will parse the module file automaticly

Local debugging

Monday, September 19, 11

Page 27: PyJS intro

Server parse

Monday, September 19, 11

Page 28: PyJS intro

Online buildingpython pyjs.py

Automaticly generate a ‘boot.js’ file, find all the dependences in modules and add the information to the end of boot.js file.

Monday, September 19, 11

Page 29: PyJS intro

Then , if we had a combo service like:

Monday, September 19, 11

Page 30: PyJS intro

We can download the file just in one

request!

Monday, September 19, 11

Page 31: PyJS intro

Finally , because of the require function used on page has a callback, it can runs after all the files

is received and finish excuting.

Monday, September 19, 11

Page 32: PyJS intro

That’s all.

Monday, September 19, 11

Page 33: PyJS intro

More..

Monday, September 19, 11

Page 34: PyJS intro

Because we use python...

Local transmission

Local plugins

Deal with CSS files.

...

Monday, September 19, 11

Page 35: PyJS intro

demixFront-end engineer @ Baidu co.

email: [email protected]

weibo/twitter: @demix

Homepage: http://demix.github.com/

blog: http://www.cnblogs.com/demix

Monday, September 19, 11

Page 36: PyJS intro

Thank You.

Monday, September 19, 11