Skip to content

web - EmScripten Merges Its Speedy "Fastcomp" Backend

[...]
Fastcomp is the name of EmScripten's new LLVM C++ back-end. Fastcomp lives outside of the LLVM tree (along with some other EmScripten-designed LLVM patches) but aims to provide noticeable benefits over its original compiler back-end.

The new Fastcomp compiler core/back-end is more streamlined, tuned around producing ASM.js code, is much faster (around four times faster), uses less system memory, and has other improvements too. The JavaScript generated by Fastcomp is also slated to be better than its original compiler core. The downside to this work though is that this LLVM code is out-of-tree and doesn't work with a stock build of LLVM for right now.
[...]

source

Translate to de es fr it pt ja

duetto - write client-server web apps in a single c++ codebase

Duetto is fully compatible with almost all C and C++ 11 code. You just need to add some tags to tell duetto if you want your methods compiled for the server or for the client. Everything else (including client to server and server to client remote procedure call, serialization and deserialization, etc.) will work automagically! The duetto compiler is based on the proven and robust LLVM stack.

source

So the current version is 0.9.3., so they are near the magic first stable release.
If you take a look into the example section, you get the picture pretty fast. A wiki page is also available. What its left to need, is some spare time :-).

Translate to de es fr it pt ja

FrOSCon - Marring Fron With Back End

By Bastian Hofmann and Volker Dusch The talk is about application architecture from the code site. Both are from ResearchGate Speak available on speakersdeck

What You Want

  • good code review
  • rapid development (even with big teams)
  • handle large code bases
  • frameworks to the rescue

Most Framework Are Dealing With Backend Or Frontend

  • backend
    • symfony
    • zend framework
  • frontend
    • backbone.js
    • jQuery
    • ExtJS

Frameworks Out There To Join Both Worlds

How To Achieve The Goal

  • incremental refactoring (take a look to flight)
  • separate your code into components
    • clean interface
    • clean architecture
    • small teams can work on that

How Reasearchgate Have Done It

Classicla Webapplication Architecture

  • loadbalancer
  • webservers
  • database
    • pgsql
    • memcached
    • mongodb
  • services (rest services)

Webserver

  • php templates
  • lazy db queries in view
  • yui
  • duplicated code

We Could Do It Better

  • try to compose your page out of containers
    • every component has to be self contained
    • can be addressed and rendered separately (by pure html response or json/xml data that is rendered by javascript on the client)
    • javascript is part of the component (easy up refactoring)
  • initial page request is returning a simple html page as response that is triggering a lot of ajax calls
  • if ajax request returns a ok, the return contains the updated data or handles the error (hint, on the backend, a "read from master" flag is added to retrieve the most accurate data without running into master/slave replication problems)
  • share code between server and client
  • templates, validation, entities
  • create "a widget"
    • php controller (providing data)
    • ...
  • do not fetch data directly (because it is painfully slow)
  • require stuff (search for "evolution of code design at facebook" at infoq)
    • fetch requirements in a preparing step
    • batch requirements by calling resolvers
    • resolvers talks with services (multi-GET)
    • services calls connector interface (databases for example)
    • fetching data from connector
    • distribute back all the fetched data
  • entity requirement
  • service requirement
  • request cache
  • Multi-Get (get multiple data via one request for fetching a lot of data)
  • requirement vs. optional
    • optional, template will be rendered without that data
  • data dependencies within a widget by using callbacks (to create a dependencies and dataload workflow)
  • php 5.5 generators by using yield
  • data dependecies between widgets by using data requirements (fetched from the require stuff above)
  • looks like this is complicated to debug by using symfony debugging tools (for example ;-))
  • rendering (by using mustache)
    • [x]html
    • json
    • v8js for rendering templates on the server (rendering mustache templates is faster in javascript then in php) and to provide a single place to render templates (cool!)
    • use models in javascript to stop messings things up
  • enables developers to only focus on their components
    • single place for refactoring
    • moving ugly code to one point
  • easies up testing (also with faked data)
  • error handling is simplified
    • remove component from the view
    • try to rerender it later
    • display a generic component
  • a/b testing is easied up (removing "long hanging fruites" - that just made my date :-D))
    • create multiple components and simple render then via a/b testing on the frontend
    • read bandit algorithm on untyped
  • by usgin "" you can use varnish to speed up the page
  • easy reusing of components ("take that button and move it or use to somewhere else")
  • mark components to load them asynchronous
  • use "placeholder" with "placeholder data" for search engines
  • try to use BigPipe (published by facebook)
    • compute as much informations as needed (like navigation) and then flush this to the client
    • render and flush some javascript logic
    • start computing the first body (kind of heavy work) that holds javascript logic and data to replace rendered and flushed content from the top
    • repeat that until you have finished creating the initial datas
    • send the final flush with the html end tag
  • fast changes on the frontend by replaceing only the components that have to be updated and use javascript push to change the url

Translate to de es fr it pt ja

web - An ARM emulator written in JavaScript

Arm-js is an ARM emulator written in Javascript. It emulates ARMv7-A and some peripherals of Versatile Express. It can boot Linux 3.6.1 and run busybox processes.

Get Started

1. Download the source code 1. git clone git://github.com/ozaki-r/arm-js.git 2. cd arm-js/ 3. git submodule init 4. git submodule update 2. Execute ruby misc/simple-http-server.rb on terminal 3. Access http://localhost:8080/arm-js.html 4. Push Boot button at the top-left corner to start the emulator

Source

Well, what can i say. Because of freaky projects like that, i started to like javascript more and more :-D.

Translate to de es fr it pt ja

usergroup - meetup - webPerformance - hamburg 130220

Attraktor e.v. mexikoring 21, hamburg

Soundcloud - Arbo Von Monkiewitsch

html5 audio playback widget - measuring for velocity

measure first

how to?

  • synthetic user monitoring (by phantom.js)
    • repeaable
    • doesn't show real user experience
    • good for benchmarking
  • real user monitoring (google analytics)
    • shows real user experience
    • change of user behavior impacts repeateability (e.g. side slow in asia but fast in euro)
    • impact of embedding site

what?

  • http ping
  • fully page load
  • include all transactions
  • follow K.I.S.S., just render the page

define your goals

  • what is fast
  • don't define random goals on yourself
  • public benchmarks are good as orientation (for e.g. set up a benchmark for youtube or similar)
  • response time
  • don't simple trust your metrics

best practices

  • httparchive, pagespeed, yslow (100 - 200 ms as full page loading speed is good enough)
  • compress each connection (use varnishs or something similar for uncompressable content)
  • availability fallback -> dc
  • performance - put api in cdn (also for http or https handshake)
  • consitency - load balanced cdns

rap it up

  • measure first
  • keep it simple
  • team autonomy

phantomJs - Raj Dudi

http://rajdudi.com

what it is - created by ariya hidayat

  • can be integrated into jenkins
  • automation and headless testing
  • can be used for metrics measurement
  • render and dump client side html
  • current version is 1.8
  • headless (Qt)Webkit/Browser
  • javascript driven
  • ideal for
    • headless website testing -> but it is not a test framework
    • screen capture
    • page automation
    • network monitoring
  • projects
    • casperjs
    • ghostbusters
    • poltergeist

code evaluation

  • evaluate(function, arg1, arg2, ...) {object}
  • returns simple objects but no functions and closures
  • execution is sandboxed
  • dom scripting and css selector works
  • use onConsoleMessage callback to receive the console messages

get it from

  • phantomjs.org
  • github.com/ariya/phantomjs
  • https://aur.archlinux.org/packages/phantomjs/

examples

https://github.com/ariya/phantomjs/tree/master/examples

hello world

console.log("Hello world"); phantom.exit();

screen capture

  • Page.render to render a screenshot
  • supports ong, jpeg, gif and pdf
  • options
    • page.clipRect = { top: 14, left: 3, width: 400, height: 300 };
    • page.paperSize = { width: '200px', height: '300px' } //for pdf output e.g., also supports borders and much more
    • page.zoomFactor = 0.25 // 1 is default
  • projects based on phantomjs
    • screenr
    • mediaqueri
    • chromanope
  • webpage api
    • var page = require('webpage').create();
    • page.open(url, callback) {void}
    • page.close() {void}
    • goBack(), goForward(), title, url
    • settings{object} //enable javascript, load images, username or password, websecurity
    • page.includeJs(url, callback) {void}
    • page.injectJs(filename) {boolean}
  • webpage callbacks
    • onLoadStarted
    • onLoadFinished
    • onAlert
    • onCallback //experimental
    • onClosing
    • onConfirm
    • onConsoleMessage
    • onError
  • system API
    • var system = require('system');
    • ...
  • filesstem api
    • var fs = require('fs);
    • separator {string}
    • workingDirectory
    • ...

troubleshooting

  • allows network sniffing
    • onResourceRequested
    • onResoureceReceived
    • TLS and SSL required for encrypted data - are they enabled?
  • error handling

cons

  • uses qtWebKit (not used by chrome, safari and so one)
  • asynchronous api - difficult to handle for many
  • not supported
    • plugins
    • webGL
    • video and audio
    • css 3-D
    • xpath

What could i add? Thanks to the talks, yes very much. Also thanks to the attraktor, you are doing it right!

Translate to de es fr it pt ja

JavaScript und das Sortieren

Seit heute ist der nachfolgende Satz, der wohl wichtigste Satz in meinem Kopf, wenn "JavaScript" und "Sortierung" zusammenfallen.

[...]die Sortierung erfolgt lexikographsich, das bedeutet, dass Zahlen wie Zeichenketten behandelt werden.
Quelle.

Der Fehler war, dass "9" nach "1,13,14" sortiert wurde. Zurecht wurde dies als Fehler angesehen, jedoch war mein JavaScript-Wissen bis zu diesem Zeitpunkt nicht mit obrigen Zitat angereichert. Dadurch suchte man, zweifelte an seinem RegExpr und schrieb viele "console.log()" in den fremden Quelltext.
Nach einer gewissen Zeit, kam auch der Rückgabewert an die Reihe. Als man Diesen dann im Log sah, zweifelte man kurz an allem. Zum Glück fand ich schnell, den oben verlinkten, Seiteneintrag und konnte die nötigen Anpassungen vornehmen :-).

Weitere Links zum Thema "JavaSkript" und "Sortierung":

Translate to de es fr it pt ja

web - opa programming language (opalang)

Three different pages in two languages pushed an entry on top of there page so i have to investigate the linked content. The entries are about "opa", an self designated "enterpriese framework for javascript". Opa can handle server and client side javascript, and writes the javascript for you. That means while creating your web application, you write all the code in the opa programming language and the framework does the rest for you. Opa uses jQuery on the client side and node.js on the server side. After a few hours investigating, i love the fact "strong static typing" as much as "available for linux, freeBsd and other systems". I recommend the tour and walk through some examples/use cases.

By surfing through the web for opa, i stumbled upon HaXe and this looks quite promising.

Translate to de es fr it pt ja

Sourceforge - projectlist 110823

After browsing trough the sourceforge.net, my tab group with "software" to look at counts 15 tabs. Hopefully i can/will check this software. Otherwise, if you checked it, write a comment.

  • webmail program like roundcube
    IlohaMail is a PHP based lightweight full featured multilingual webmail program with IMAP and POP3 support. IlohaMail also includes a full-featured contacts manager, bookmarks manager, and scheduler.
    Ilohamail
  • web file management
    AjaXplorer is a PHP rich-client browser for managing files on a web server without FTP. Implements usual file actions, online zip browsing, text files edition and images preview. Users management system and multi-languages.
    ajax filemanager
  • web instant messenger
    AJAX Chat is a fully customizable web chat implemented in JavaScript, PHP and MySQL which integrates nicely with common forum systems like phpBB, MyBB, PunBB, SMF and vBulletin. A Flash and Ruby based socket connection can be used to boost performance.
    ajax-chat
  • phpFreeChat is a free, simple to install, fast and customizable chat that uses by default files for message and nickname storage. It uses AJAX to smoothly refresh and display the chat zone and the nickname zone.
    phpfreechat
  • web proxy
    Lightweight, PHP-based Web Proxy that can utilize whatever remote connecting ablities your server has to offer. It should work out of the box. No configuration needed.
    KnProxy
  • web desktop/os
    eyeos is an open source web desktop following the cloud computing concept, written in mainly PHP and XML. It acts as a platform for web applications written using the eyeOS Toolkit. It includes a Desktop environment with 67 applications and sys utils.
    eyeos
  • website heatmap
    ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones. Requires Javascript on the client to track clicks, PHP and GD on the server to log clicks and generate the heatmap
    clickheat
  • web human resource management
    OrangeHRM is an Open Source Human Resource Management System that covers Personnel Information Management, Employee Self Service, Leave, Time & Attendance, Benefits, and Recruitment. Tags: HRM, HRMS, HCM, HRIS, EHRMS, Human Capital Management
    orangehrm
  • open source nas system
    Openfiler is a browser-based network storage management utility. Linux-powered, Openfiler delivers file-based Network Attached Storage (NAS) and block-based SAN in a single framework. It supports CIFS, NFS, HTTP/DAV, FTP, and iSCSI.
    openfiler
  • application security
    The Open Web Application Security Project (OWASP) software and documentation repository.
    OWASP
  • running native linux code on windows with andLinux
    andLinux is a complete Ubuntu Linux system running seamlessly in Windows 2000 based systems (2000, XP, 2003, Vista, 7; 32-bit versions only). This project was started for Dynamism for the GP2X community, but its userbase far exceeds its original design. andLinux is free and will remain so, but donations are greatly needed.
    andLinux
Translate to de es fr it pt ja