• This repository has been archived on 05/Aug/2020
  • Stars
    star
    646
  • Rank 69,659 (Top 2 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 12 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Mobify.js was a JavaScript framework for optimizing sites for mobile. It is no longer actively maintained.

Mobify.js

Mobify.js is an open source library for improving the performance of websites by providing responsive images, and optimized JS/CSS. It does this by using capture.js to control the resources on the page, and uses resizeImages.js, jazzcat.js, and cssOptimize.js to change the resources on the page to point to Mobify's proxy services to optimize the resources.

For instructions on how to use the library, follow the instructions on mobifyjs.com or build the docs site manually in the instructions below.

Development

Building

Mobify.js uses Bower, Grunt.js and Require.js to build the library, and manage all of the dependencies. First, you will need to install the grunt-cli globally:

npm install -g grunt-cli

And then download the latest code from git and install the dependancies:

git clone https://github.com/mobify/mobifyjs.git
cd mobifyjs
npm install
bower install

Now, to build the library, simply run the following command:

grunt build

Open the build folder to see the generated Mobify.js libraries.

Mobify.js is built with AMD modules using almond.js.

In order to build Mobify.js during development without having to run grunt build everytime you change a file, run the following command:

grunt serve

This will run a development server on http://localhost:3000 using connect, and build the library every time the files in src change.

To see how the project is setup to build, open up Gruntfile.js and have a look!

Build Setup

Require.js is used to build Mobify.js.

  • src/config.js # The require.js base config for all build mobify.js builds
  • src/mobify-library.js # Defines how to build the full mobify.js library

There is also an example custom build file to make it simple to build a custom mobify.js library (or to compile the library with executable code):

  • mobify-custom.js.example

To create a custom build, run the following:

`cp mobify-custom.js.example mobify-custom.js`

Then, run grunt serve as normal. The output of the custom build will be located in build/custom.

Note: We use a mobifyjs symlink to resolve paths so they can be the same locally as they are on the CDN. This can be problematic for Windows.

Tests

Tests for Mobify.js are written in QUnit. To run them individually, run grunt serve and then go to http://localhost:3000/tests/capture.html or any other of the QUnit tests in the /tests/ folder.

To run all of the tests in an automated fashion using Phantomjs (the headless webkit browser) run the following command:

grunt test

It's also important when developing not to run into any regressions on all of the supported browsers. The Gruntfile is setup to be able to run qunit tests on many browsers we support (in order to do this yourself, you will need to set SAUCE_USERNAME and SAUCE_KEY in your environment variables).

grunt saucelabs

Deploying

By default, the deploy command is set to deploy Mobify.js to cdn.mobify.com. To deploy here, ensure AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY are set in your environment variables.

grunt deploy

Browser support

Using Capturing:

  • All Webkit browsers (Safari, Chrome, Netfront, etc)
  • Firefox - version 4 and up
  • Opera - 11 and up (previous versions untested)
  • IE - 10 and up

Not Using Capturing:

Support for using the API without Capturing has not been tested, but it will at minimum support the browsers listed above (as well, it should cover many older browsers)

Docs

The compiled documentation for Mobify.js can be found online at mobifyjs.com.

The static site is built with Jekyll. Run the following commands to get the docs running locally:

gem install jekyll
grunt jekyll

Then navigate to http://localhost:4000/mobifyjs/docs/.

More Repositories

1

pikabu

Off-Canvas flyout menu
HTML
453
star
2

iterstuff

Useful tools for working with iterators
Python
169
star
3

bellows

A responsive, mobile-first accordion UI module for progressive disclosure on the web.
JavaScript
140
star
4

branching-strategy

πŸ”€ Branching strategies! For Git!
135
star
5

scooch

A mobile-first JavaScript-driven content and image carousel
JavaScript
125
star
6

mobify-code-style

πŸ“š Mobify's coding style and standards!
Python
117
star
7

handbooks

A collection of Mobify's internal handbooks and styleguides
90
star
8

developer-values

πŸ™Œ Principles to follow when building software.
76
star
9

commercecloud-ocapi-client

Salesforce Commerce Cloud Open Commerce API (OCAPI) for Node and browsers πŸ›’
JavaScript
70
star
10

nightwatch-commands

A set of Mobify specific custom commands for Nightwatch.js
JavaScript
60
star
11

magnifik

An image zooming module for mobile
JavaScript
54
star
12

sass-sleuth

Adapts Webkit Web Inspector to handle Sass line number debugging information
36
star
13

mobify-client

Mobify CLI and Tools for use with the Mobify.js Adaptation Framework
JavaScript
23
star
14

pinny

A mobile-first content fly-in UI plugin
JavaScript
23
star
15

mobify-modules

DEPRECATED! See https://github.com/mobify/mobify.github.io
CSS
23
star
16

meowbify

🐈 Meowbify
CoffeeScript
17
star
17

mobifyjs-demos

Demo mobile sites created using Mobify.js
JavaScript
15
star
18

hijax

XHR Proxy to intercept AJAX calls independent of libraries.
JavaScript
13
star
19

spline

⚠️ DEPRECATED. Spline is a mixin and function library for Sass. It makes writing stylesheets for mobile-first builds faster and easier. Spline provides methods to manipulate text, use web & icon fonts, create CSS3 shapes, and much more.
CSS
11
star
20

ui-kit

πŸ“± Quickly and efficiently design PWAs for ecommerce brands.
10
star
21

hybris-occ-client

πŸ› Hybris Omni Commerce Connect (OCC) client for Node and browsers.
HTML
9
star
22

capturejs

Transform your DOM to be your API for your front-end application
JavaScript
9
star
23

mobify-data-guide

πŸ“š List of readings that would be useful in getting started on with working with any data set.
7
star
24

vellum

Default project styles for a mobile-first AdaptiveJS build.
HTML
5
star
25

redux-runtypes-schema

Redux store validation via runtypes
TypeScript
5
star
26

deckard

Device OS and Browser detection
HTML
5
star
27

astro-scaffold

πŸ— Starting point for building Astro applications!
JavaScript
4
star
28

split-test

An A/B split test library for persisting split choices
JavaScript
4
star
29

stencil

DEPRECIATED - The latest Stencil development is currently taking place in the Adaptive.js repo.
CSS
4
star
30

imageresize-client

Client code for the Mobify image resizing API
HTML
4
star
31

hora.js

Hora.js: Custom Google Analytics Tracking
HTML
3
star
32

lockup

A mobile first scroll blocking plugin.
HTML
3
star
33

navitron

A mobile optimized sliding navigation plugin.
JavaScript
3
star
34

tozee

Alphabet scroll jumping
HTML
3
star
35

python-appfigures

API wrapper for the appfigures.com
Python
3
star
36

webpush-payload-encryption

Python code to handle the encryption of push notifications for Firefox and Chrome
Python
3
star
37

calypso

A set of tools for better Docker deployments to AWS Elastic Beanstalk.
Python
3
star
38

multiple-service-workers

Experimenting with multiple service workers
HTML
2
star
39

shade

A mobile-first plugin for creating scroll and touch blocking overlays for content
JavaScript
2
star
40

jazzcat-client

Client code for Mobify's javascript optimization service
JavaScript
2
star
41

level

⚠️ DEPRECATED. CST's own personal Normalize
CSS
2
star
42

styleandclass-planning

Style & Class Meetup Public Site
2
star
43

css-optimize

The client-library for optimizing CSS using the Jazzcat service
JavaScript
2
star
44

webpayments-test

πŸ’³ PaymentRequest browser API demo.
JavaScript
2
star
45

schemer

Schema comparison tool for Adaptive projects
JavaScript
2
star
46

dmit

Wrap docker-machine in useful functionality
Shell
2
star
47

descript

Manage desktop scripts in a simple way in Adaptive.js
HTML
2
star
48

heroku-buildpack-openssl

Buildpack for OpenSSL 1.0.2e on Heroku
Shell
2
star
49

selector-utils

Selector utility functions that can be selectively included in your Adaptive.js builds.
JavaScript
1
star
50

generator-nightwatch

A yeoman generator for Nightwatch testing framework
JavaScript
1
star
51

deprecated-mobify-tech-prtnr-na03-dw

The Demandware Demonstration Integration
CSS
1
star
52

stencil-fancy-select

A fancier select replacement component using Javascript
CSS
1
star
53

generator-progressive-web

❗️DEPRECATED❗️-- Generator for creating Progressive Web projects
Shell
1
star
54

adaptivejs-split-test-examples

Split test examples for Adaptive.js!
JavaScript
1
star
55

depot

A collection of mobile-focused lo-fi wireframe components built in Photoshop.
1
star
56

stencil-tabs

JavaScript
1
star